Vue.js 如何将SASS文件添加到引导vue/webpack（vue cli项目）中？

我基于和（）初始化了一个项目，不知道如何将自定义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 }
})

运行

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

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

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

我希望这有帮助

当我试着

vue init bootstrap-vue/webpack project-name 

js文件包含独立scss文件所需的sass加载程序，如您尝试导入的文件，但当我运行

npm run build

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

./src/main.js中出现错误 未找到模块：错误：无法解析“sass加载程序”

然后我试着：

npm install sass-loader --save

但是得到：

npm警告sass-loader@7.1.0需要webpack@^3.0.0 | | ^4.0.0的对等机，但未安装。您必须自己安装对等依赖项

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

“网页包”：“^2.6.1”

---

因此，目前引导vue/webpack似乎存在一些依赖性问题。

我想使用

引导vue/webpack

模板。我不想使用

引导vue/webpack simple

。在

bootstrap vue/webpack

中，我没有关于Sass的问题。@Cichy我已将答案扩展到bootstrap vue/webpack，看起来该项目存在Sass加载程序依赖项冲突

npm install sass-loader --save