vue中使用sass遇到的坑

1. 在当前项目中打开命令板执行下面的命令

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

1. build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

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

1. 页面中使用

==vue项目使用scss时报错==

Module build failed: TypeError: this.getResolve is not a function

原因：

sass版本太高，导致webpack编译时出错，此时需要卸载当前版本重新安装低版本即可。
（可在package.json文件中搜索sass-loader查看当前版本。目前8.0.0版本会报错，
7.3.1版本可以正常运行） 

卸载：

npm uninstall sass-loader

安装低版本：

npm install [email protected] --save-dev

==vue项目使用scss时再次报错==

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

原因：

node-sass版本过高，降低到4.x

卸载

npm uninstall node-sass

安装

npm install [email protected]

重新运行OK！

还有一种情况：