1、安裝文件

npm install --save-dev sass-loadernpm install --save-dev node-sass

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模塊下面的rules添加以下代碼

...{  test: //.scss$/,  loaders: ["style", "css", "sass"]},...

注意：這里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下寫法

<style lang="scss" scoped>  div {    a {      color: red     }    }</style>

2、@import外部導入，如果不加scoped如果在app.vue中導入那么就是全局scss

<style lang="scss" scoped> @import './assets/scss/global.scss'; * {  color: red }</style>

這樣寫下面的覆蓋外部引入的

注意遇到的坑

報錯

/node-sass/vendor no such file or directory in node-sass......

解決方法，運行 rebuild解決了

npm/cnpm rebuild node-sass --save-dev

更詳細的解決方案如下：

根據package.json,進行npm install node_modules, 運行npm run dev時候,報錯,錯誤如下.

查看node_modules文件夾,發現,并無vender 文件夾.如下圖:

解決辦法:

上圖node-sass文件夾下,新建 vender 文件夾.然后運行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夾,如下圖所示:

就可以了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。