如何将 SASS 文件添加到 bootstrap-vue/webpack（vue-cli 项目）？

Question

我基于Bootstrap-Vue 和vue-cli template (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

Answer 1

跑步

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

有“使用 sass？”作为第四个选项，选择“是”仅将 webpack 配置为从 vue 组件中提取 scss。要使用独立的 scss 文件，您需要在 webpack.config.js 文件中添加额外的规则，例如

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

希望对你有帮助。

当我尝试使用

vue init bootstrap-vue/webpack project-name 

utils.js 文件包含独立 scss 文件所需的 sass-loader，例如您尝试导入的文件，但是当我运行时

npm run build

我得到的错误与你的略有不同：

./src/main.js 中的错误 未找到模块：错误：无法解析“sass-loader”

然后我尝试了：

npm install sass-loader --save

但是得到了：

npm WARN sass-loader@7.1.0 需要 webpack@^3.0.0 的 peer || ^4.0.0 但没有安装。您必须自己安装对等依赖项。

如果你查看 package.json 它正在使用

"webpack": "^2.6.1",

所以目前看来 bootstrap-vue/webpack 存在一些依赖问题。