vue2 配置scss

1、安装文件

npm install --save-dev sass-loader
npm 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

更详细的解决方案参考：https://www.jianshu.com/p/8bf...