Vue中引入Sass、Less扩展语言的方法
序言：上篇博文记录了 对Css、Sass、Less区别以及特性的一些理解 ，这篇讲述一下应该怎么引入Sass、Less这两种Css扩展语言，版本为：（vue@3.2.20 、@vue/cli 4.5.13）【脚手架生成的空白项目】。
1、引入Sass
使用命令：npm install -D sass-loader node-sass 引入 node-sass （6.0.1）和 sass-loader（10.2.0）【注意下版本】
npm install -D sass-loader node-sass
//可以使用
"devDependencies": {
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"
},// 在这里可以使用sass的语法
<style lang="sass">
.testSass
flex: 1
padding: 8px
.useSass
color: red //冒号后面必须有空格
font-weight: 600
font-size: 22px
background: #FFFFFF
border: 1px black dashed
</style>2、引入Less
使用命令：npm install less less-loader -D 引入less（4.1.2） 和 less-loader（8.0.0）
我们安装在开发环境下，在这样安装完之后，报了一个错误：Syntax Error: TypeError: this.getOptions is not a function 。百度之后发现是版本的问题，于是就降了了一下版本：
npm install -D less@4.1.2
npm install -D less-loader@7.2.1
//最后的版本为：
"devDependencies": {
"less": "^4.1.2",
"less-loader": "^7.2.1",
}
最后直接引入就好：
// lang='less' 可以使用less的语法 以及 识别.less文件
<style lang="less">
// test.less 在上篇博文里已经贴出
@import url("@/assets/less/test.less");
.Test {
height: 100%;
width: 100%;
.topTitle {
color: aqua;
}
}
</style>3、补充
附一下gitHub项目地址：https://github.com/fei2020last/TestPro
有关Npm的一些知识：
-S, --save 安装包信息将加入到dependencies（生产阶段的依赖）
npm install less --save 或 npm install less -S //默认安装最新版本
npm install --save less-loader@8.0.0 或 npm install -S less-loader@8.0.0 //安装指定版本
npm uninstall --save less-loader //卸载正式环境下的less-loader
// package.json 文件的 dependencies 字段：
"dependencies": {
"less": "^4.1.2",
"less-loader": "^8.0.0"
}-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它
npm install less --save-dev 或 npm install less -D //默认安装最新版本
npm install --save-dev less-loader@8.0.0 或 npm install -D less-loader@8.0.0 //安装指定版本
npm uninstall --save-dev less-loader // 卸载
//package.json 文件的 dependencies 字段：
"devDependencies": {
"less": "^4.1.2",
"less-loader": "^8.0.0"
}//最新的稳定版本。是已经发布了的。 运行以下命令即可
npm install npm@latest
//npm的最新未发布版本，最终作为最新版本发布。一般是你想在发布前就使用即将的新版本进行测试时。运行以下命令即可
npm install npm@next
