sass安装引用以及报错处理

有一段时间没用sass了，今天倒腾了一下，做个简单得记录

1，安装sass得依赖包

　　npm install --save-dev sass-loader

　　//sass-loader依赖于node-sass

　　npm install --save-dev node-sass

2，在build文件夹下的webpack.base.conf.js的rules里面添加配置

　　{

 　　test: /\.sass$/,

 　　loaders: ['style', 'css', 'scss']

　　}

3，npm run dev运行项目

4，随便选一个页面，给style标签添加lang="scss"

　　<style lang="scss">

　　　　$color :blue;

　　　　$side : left;

　　　　.txt{color:$color}　

　　　　.title{

  　　　　text-align: left;

  　　　　&:hover{

    　　　　color: $colorBlue;

 　　　　 }

　　　　}　

　　　　.leftimg img{

  　　　　width: 75%;

  　　　　margin-#{$side}: 3rem;

　　　　}

　　</style>

以上4个步骤即可，在安装得时候遇到两个错

1，Module build failed: TypeError: this.getOptions is not a function     at Object.loader (D:\IOTPC\boardSystem\node_modules\sass-loader\dist\index.js:25:24)

　　解决方案：这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行。

　　　　　　　卸载当前版本 npm uninstall sass-loader 安装 npm install sass-loader@7.3.1 --save-dev

2，再次运行项目，又报错：Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.     at getRenderFuncFromSassImpl (D:\IOTPC\boardSystem\node_modules\sass-　　　　                                                              loader\dist\index.js:165:13)     at Object.loader (D:\IOTPC\boardSystem\node_modules\sass-loader\dist

　　解决方案：node-sass版本不兼容【当前版本过高/过低】。

　　　　　　　　卸载当前node-sass：npm uninstall node-sass。安装npm install node-sass@版本号（4.14.1）