巩固——Vue中如何使用less和scss？

最近vue用的越来越勤了，在复习一下vue如何使用less和scss，直接进入主题吧：

安装使用less：

1、首先使用npm下载依赖；

npm i less less-loader -S

2、修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

// 此种方法在控制台中标签样式显示的是style标签样式
{ 
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

// 可以在控制台中看到当前标签样式来自于哪个less文件
{ 
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
　　 options: { sourceMap: true }
}

或者在main.js里

import less from 'less'
Vue.use(less)

3、 在vue文件中的style标签中添加lang=”less”即可在标签中使用less，或者外部引入less ，就可以开始愉快的使用less了

<style lang="less" scoped>
@import "../../static/common.less";
bg{
   background: red;
}
</style>

注意： less和less-loader的版本都会安装比较靠后的
因为less高版本的依赖有些错误，所以我们运行项目的时候可能会卡住或者报错：

解决：在根目录下package.json找到less和less-loader，我改成了下面的版本，然后npm install再npm run dev就正常了

"less": "^3.9.0",
"less-loader": "^5.0.0",

安装使用scss：

和less安装差不多

1、 首先使用npm下载依赖；

npm i node-sass sass-loader style-loader -D

2、 同样需要修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

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

3、 在.vue文件的style标签中加 lang=”scss”

<style lang="scss" scoped>
@import "../../static/common.less";
bg{
   background: red;
}
</style>

注意：和上面less运行会有一样的问题，因为版本过高会导致项目运行出问题，所以都需要安装指定版本。安装重启后就可以正常运行了

npm uninstall sass-loader  //卸载
npm install sass-loader@7.3.0  //安装指定版本

npm uninstall node-sass //卸载 node-sass
npm install node-sass@4.14.1 //然后安装最新版本(5.0之前)

这种方式和修改package.json区别就是，前者是先卸载之前的再安装指定版本、后者是直接指定版本然后下载覆盖之前的

拓展：

学过CSS的人都知道，它不是一种编程语言。

你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事；很自然地，有人就开始为CSS加入编程元素，这被叫做”CSS预处理器”(css preprocessor)。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件

什么是CSS 预处理器？ SCSS是一种CSS预处理语言

定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性(完全兼容css3)，让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

那么SCSS和SASS 有什么区别呢

• 文件扩展名不同，文件后缀分别是“.scss”和“.sass”
• sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；
• scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；