Как добавить файл SASS в bootstrap-vue / webpack (проект vue-cli)? - PullRequest
Новая
       42

Как добавить файл SASS в bootstrap-vue / webpack (проект vue-cli)?

0 голосов
/ 13 октября 2018

Я инициализировал проект на основе Bootstrap-Vue и шаблона vue-cli ( webpack ), и я не знаю, как я могу добавить свой пользовательский SCSSфайлы для этого проекта.

Я создаю файл src / assets / scss / app.scss , и я добавил import './assets/scss/app.scss' в src / main.js файл: 

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/scss/app.scss' // HERE IS MY CHANGE!!!

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
})

но я получил ОШИБКУ: 

This relative module was not found:
* ./assets/scss/app.scss in ./src/main.js

1 Ответ

0 голосов
/ 13 октября 2018

Бег 

vue init bootstrap-vue/webpack-simple project-name

имеет 'Использовать sass?'в качестве четвертого варианта выбор «Да» только настраивает веб-пакет для извлечения scss из компонентов vue.Чтобы использовать автономный файл scss, вам нужно добавить в файл webpack.config.js дополнительное правило, например 

  {
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader"
    ]
  }

Надеюсь, это поможет.

Когда я попробовалс 

vue init bootstrap-vue/webpack project-name

Файл utils.js содержит загрузчик sass, необходимый для автономных файлов scss, таких как тот, который вы пытаетесь импортировать, но когда я запустил 

npm run build

Я получил немного другую ошибку:

ОШИБКА в ./src/main.js Модуль не найден: Ошибка: Не удается разрешить 'sass-loader'

Затем я попытался: 

npm install sass-loader --save

но получил:

npm WARN sass-loader@7.1.0 требует однорангового узла webpack@^3.0.0 ||^ 4.0.0 но ни один не установлен.Вы должны установить одноранговые зависимости самостоятельно.

Если вы посмотрите в package.json, он использует

"webpack": "^ 2.6.1",

Так выглядитВ настоящее время у bootstrap-vue / webpack есть некоторые проблемы с зависимостями.

...