vue2-配置scss

共计 577 个字符，预计需要花费 2 分钟才能阅读完成。

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…