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

Я инициализировал проект на основе 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

vue.js vue-cli bootstrap-vue
person Cichy    schedule 13.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Бег

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

есть "Использовать дерзость?" в качестве четвертого варианта выбор «Да» настраивает только webpack для извлечения 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 [email protected] требует однорангового узла webpack@^3.0.0 || ^ 4.0.0, но ничего не установлено. Вы должны сами установить одноранговые зависимости.

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

"webpack": "^ 2.6.1",

Таким образом, похоже, что в настоящее время у bootstrap-vue / webpack есть некоторые проблемы с зависимостями.

person Richard Creek    schedule 13.10.2018
comment
Я хочу использовать шаблон bootstrap-vue/webpack. Я не хочу использовать bootstrap-vue/webpack-simple. В bootstrap-vue/webpack у меня нет вопросов по Sass. - person Cichy; 13.10.2018
comment
@Cichy Я расширил ответ, чтобы охватить boostrap-vue / webpack, похоже, что в этом проекте есть конфликты зависимостей sass-loader - person Richard Creek; 15.10.2018