vue2 配置scss

一、安裝文件

npm install --save-dev sass-loader
npm install --save-dev node-sass

二、配置 webpack.base.conf.js
找到webpack.base.conf.js文件的module模塊下面的rules添加如下代碼

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

注意：這裏loaders和文件中其餘配置不一樣加了s

三、使用
一、在使用的地方以下寫法

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

二、@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

更詳細的解決方案參考：https://www.jianshu.com/p/8bf...