在vue中使用scss及注意事项

我使用的是vue-cli创建的项目，使用npm进行包管理。

在Vue中使用scss

先安装依赖

1

npm i node-sass sass-loader style-loader -D

webpack配置loader

在*/build/webpack.base.config.js* 文件的 module.export 内的 module.rules添加：

1
2
3
4

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

.vue中指定style

1
2
3

<style lang="scss">
  /* scss code */
</style>

报错

运行没有报错，但是一直编译，卡住了。

当然是版本问题，自动装的都是最新版，打开package.json可以看到我的sass-loader是^10的，降低版本，安装 ^7.3.1的。

然后运行

but，还是有问题

1
2

Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl

因为node-sass@latest为v5.0.0,而sass-loader期望值为^4.0.0

解决方法：

1
2
3
4

//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本（5.0之前）
npm install node-sass@4.14.1

然后就成功了

记录一下，版本问题踩的坑