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. 页面中使用

<style scoped lang="scss">
.hello {
    p {
        color: red;
    }
}
</style>

==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 sass-loader@7.3.1 --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 node-sass@4.14.1

重新运行OK！

还有一种情况：

<style lang="sass">

运行项目

npm run dev

终端显示错误，如下：

 ERROR  Failed to compile with 1 errors 
 error  in ./src/components/XzHeader.vue

原因：

sass语法不使用大括号和分号。

那么，你只要把lang="sass"改成lang="scss"就行了。