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

Posted 2023-03-15

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

【英文标题】：How can I add SASS file to bootstrap-vue/webpack (vue-cli project)?

【发布时间】：2019-03-18 10:53:38

【问题描述】：

我基于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

【参考方案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 存在一些依赖问题。

【讨论】：

我想使用bootstrap-vue/webpack 模板。我不想使用bootstrap-vue/webpack-simple。在bootstrap-vue/webpack 我没有关于 Sass 的问题。

@Cichy 我已将答案扩展为涵盖 boostrap-vue/webpack 看起来该项目存在 sass-loader 依赖冲突