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...