vue2.0+版本项目中scss安装和应用以及踩过的坑_ps d:\wujie\webstudy\vue2-template> npm install no

一：安装

正常的安装指令

npm install node-sass --save-dev //安装node-sass 
npm install sass-loader --save-dev //安装sass-loader 
npm install style-loader --save-dev //安装style-loader 

但是，执行上述指令，安装是会报一系列版本错误，下面有列举，建议直接安装指定版本，绕过一些坑。

安装指定版本：

npm install node-sass@4.14.1  --save-dev

npm install sass-loader@7.3.1 --save-dev

npm install style-loader@1.3.0 --save-dev 

说明： 1. @^4.14.1是指定的版本号

如果，指定版本安装之后，就可以直接跳到第三步，应用sass了，因为新的版本的vue-cli不需要修改配置文件了。因为我安装没有指定版本，按照以前配置方法修改webpack.base.config.js，遇见一些安装问题。记录如下：

二、修改配置文件 

打开build文件夹下面的webpack.base.config.js，修改module下的rules：数组最后中添加

loader: 'sass-loader!style-loader!css-loader',

然后报错：Module build failed: TypeError: this.getOptions is not a function

原因：版本问题，主要是因为node-loader版本过高导致的问题，可以将版本降低到@7.3.1 

package-lock文件查看现在版本：

 npm install sass-loader@7.3.1 --save-dev 降低版本号

改过来了：

 又报了这：

 依然是版本问题：node-sass 6.0.0版本与^4.0.0不兼容

解决方法：指令：

npm uninstall node-sass   //先卸载之前的版本

npm install node-sass@4.14.1 

npm run dev   

终于启动了···············

三、应用sass

1.组件中添加<style>

<style lang="scss" scoped>
//这里可以写sass了
</style>

 2.引入.scss文件

大多数我们的样式是写在样式文件中引进去的，所以现在我们要写一个style.scss文件做为共通的样式引进去。在assets下的scss文件夹中创建style.scss

在main.js中添加

import './assets/scss/style.scss';

这样，APP中的页面都可以引用这个文件了

然后，npm run dev运行！

报错了·················

style-loader报了Module build failed: TypeError: this.getOptions is not a function

style-loader版本高导致的，降到1.3.0，其他版本没试过，因为以前的项目是这个版本，所以我直接降到了这个版本，然后不报错了，操作指令：

npm unstall style-laoder

npm install style-loader@1.3.0 --save-dev

这下肯定能运行了，npm run dev！

然而，又又又又又报错了···················哎，我就是想用个sass而已········

搜了一下，也是版本更新的问题，将webpack.base.config.js 新添的scss去掉就行了

原本添加的这段，去掉

{
    test: /\.scss$/,
    loader: 'sass-loader!style-loader!css-loader',
}

最后npm run dev ,可以了

在引入的scss文件中，写入正确的语法样式就可以了，报错的时候注意一下，有的时候是因为sass的语法错误报错，安装时要区分一下是什么错误。