代码之家 › 专栏 › 技术社区 › Cichy

如何将SASS文件添加到引导vue/webpack(vue cli项目)?

bootstrap-vue vue-cli vue.js

0

Cichy · 技术社区 · 8 年前

我初始化了一个基于 Bootstrap-Vue 和 vue-cli template ( webpack )我不知道如何将自定义的SCSS文件添加到此项目中。

我创建文件 src/资产/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 回复 | 直到 8 年前

1

Richard Creek 8 年前

跑步

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

“使用sass?”作为第四个选项,选择“是”只会将webpack配置为从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 WARN sass loader@7.1.0需要webpack@3.0.0 | | ^4.0.0的对等方,但未安装任何对等方。您必须自己安装对等依赖项。

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

“webpack”:“^2.6.1”,

所以看起来bootstrap vue/webpack目前有一些依赖性问题。