vue2.0项目中引入sass、less

一、vue2.0项目中引入sass预编译

（1）安装依赖

vue项目中想要使用sass,需要安装上node-sass、sass-loader和style-loader等模块。
使用命令：npm i node-sass@4.14.1 sass-loader@7.3.1 style-loader -D
加上版本号是为了防止版本过高在后面运行时报错。我这边是后面换了版本号才不报错的。

（2）设置配置文件

在vue项目中build文件夹下的webpack.base.conf.js文件里的rules:下添加下面代码：

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

如图：

在webpack.base.conf.js中添加内容.jpg

（3）页面中引用

<style scoped lang="scss">
$color:red;
$k:100px;
.hello{
  width:$k;
    height:$k;
    background: $color;
}
</style>

这上面指定的lang="scss"类型是.scss,而不是.sass,这两都之间有什么不同呢？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

二、vue2.0项目中引入less预编译

（1）安装依赖

使用命令：
npm install less less-loader --save-dev或
cnpm install less less-loader --save-dev

（2）设置配置文件

在vue项目中build文件夹下的webpack.base.conf.js文件里的rules:下添加下面代码：

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
} 

如图：

在webpack.base.conf.js中添加内容.jpg

（3）页面中引用

<style scoped lang="less">
@color:red;
@k:100px;
.hello{
  width:@k;
    height:@k;
    background: @color;
}
</style>

友情提示：当npm run dev运行时，出现报错（Module build failed: TypeError: this.getOptions is not a function），有可能是less-loader版本过高导致的，解决办法是先卸载之前的高版本，安装低版本，如下：

npm uni less less-loader
npm i less less-loader@4.1.0  --save-dev