1. 引言
在前面的章节，已经讲解了部分vue-element-admin的知识：
- 《Vue项目实战（01）-vue-element-admin项目结构分析》
- 《Vue项目实战（02）-Vuex状态管理模式》
- 《Vue项目实战（03）-alias》
- 《Vue项目实战（04）-axios封装》
- 《Vue项目实战（05）-多环境配置》
- 《Vue项目实战（06）- 钩子方法触发失败的解决》
- 《Vue项目实战（07）- 登录权限分析》
本文来分析vue-element-admin里面的 css预处理器。
2. css预处理器
在vue-element-admin的登录界面index.vue（目录：src/views/login/index.vue）,可以看到里面引入的css样式是这样的：
我们可能知道stype标签是引入样式文件的意思但是后面的 lang 、scoped就不清楚了，其实在项目里面使用到了css预处理器，下面来讲解下。
2.1 什么是css预处理器？
首先看看css预处理器定义：
css预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的css文件，以供项目使用。css预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题。css预处理语言有scss (sass) 和less等等，总之都是用来实现样式的。
我对css预处理器的理解就是：为兼容各种浏览器而诞生的一种新的样式语言，经过编译最终转化为各个浏览器可识别的css文件。
2.2 属性分析
可以看到引用css预处理器的模板代码如下：
<style lang="scss" scoped> ...... </style>
2.2.1 lang属性
- lang的属性可选：
scss（sass）、less等等
2.2.2 scoped属性
scoped是指定样式的局部作用域App.vue相当于根容器，因此不设置scoped，所以一般在App.vue中引用公共样式- 如果在其它
.vue页面中用scoped，代表当前样式只作用于当前.vue页面，不作用于其它.vue页面。
2.2.3 sass和scss
细心的童鞋可能会注意到lang属性值为scss（当然也可以为less）。
scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点，那它们有什么区别和关联呢？
sass和scss是两个不同的东西，只是相似！sass借鉴了ruby语言的规范很严格！代码里面也没有大括号！（这对于习惯用css{}的前端人员很难适应！）- 于是就出现了
scss，完美兼容css，还能有sass的功能！ - 如果用的是
webpack-simple模版用sass的话就是lang="sass"，sass是没有{}括号的，如果有{}会抱错。 webpack模版的话就是用lang="scss"
2.3 sass使用案例
2.3.1 安装使用
在vue项目中，sass使用步骤如下：
① 先下载和安装node-sass和一些加载器：
$ cnpm install sass-loader node-sass vue-style-loader --D
② 配置webpake加载器（webpack.base.config.js ）,无需手动添加，相当于是编译识别sass!
{ test: /\.scss$/, loaders: ["style", "css", "sass"] }
③ 在需要用到sass的地方添加lang=scss
<style lang="scss" scoped> ...... <style>
一般项目在构建的时候会在
package.json里面提前引入了node-sass和加载器，webpack也默认配置了加载器，具体参考项目里面的配置。
2.3.2 结构化与模块化
2.3.2.1 分散式
分散式：参考大部分的后台系统， 分散式是vue官网推荐的一种方式，就是每个模块是一个独立的.vue文件，里面包含template模版、js、css，这三种都用标签封装起来，成为一个vue实例，实例解析的时候逐步解析每个标签的内容，所以这个vue文件里面的sass是局部的，只有这个实例界面生效，一般在标签上面加scoped来局部化，去掉scoped就会变成全局样式。
特点：
- 好处：每个
vue界面样式独立开发，互不影响，定位问题和改界面样式的话都比较方便，好找 - 弊端：界面被
scoped局部化之后，不能覆盖界面里面的子组件样式，因为样式只对当前界面生效。（可以加/deep/解决） - 公共样式和变量：公共样式和公共变量一般定义在外面，每个界面要用的时候都需要引入（
import）
2.3.2.1 集中式
集中式： 集中就是把所有模块的样式都抽离出来做独立的.scss文件，每个模块里面不写scss标签。
步骤：
- 写一个公共的
scss文件(app.scss)把所有模块的样式按照顺序都引入一遍 - 先引公共变量，再引公共样式，最后引入每个模块
- 最后在
app.vue里面或者main.js主入口里面import app.scss，最后界面就一个style标签。
特点：
- 好处：所有样式集中管理，样式之间可以互相覆盖，可以随意覆盖子组件样式，公共变量和公共样式可以随意使用。
- 弊端：所有模块都需要独立的样式文件，导致样式文件过多不好管理，互相覆盖容易产生
bug（为了不互相覆盖，每个样式都需要写在 父样式的嵌套里面，引入的时候也需要注意顺序）， - 公共样式和变量：公共样式和公共属性会在引入根样式文件（
app.scss）里面第一个引入，这样后面引入的样式就可以随意使用。
3. element项目分析
到这里，我们对css预处理器有一个大致的了解了，并知道如何使用，下面分析vue-element-admin项目的使用情况。
首先简要描述一下项目使用的步骤：
package.json引入sass和sass-loader- 执行命令（
cnpm install），安装sassmain.js，应用全局scss样式- 单个界面（
.vue）定义局部样式
使用详细步骤：
- ① 首先在
package.json，可以看到项目引入了sass和sass-loader，并使用cnpm install就可以引入包含此的所有依赖。
- ② 在
main.js（目录：src/main.js）,可以看到对样式（scss）进行了一个集中式管理， 先引公共变量，再引公共样式（注意：这里是一个全局样式）：
- ③ 回归到了我们的登录界面
index.vue（目录：src/views/login/index.vue）,我们可以看到里面用了两个style，具体解析如图中所述：
4. 总结
到这里，相信大家已经对css预处理有一个新的了解及知道怎么在项目中使用了。
在登录界面index.vue（目录：src/views/login/index.vue）其实还引入了normalize.css样式。
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，normalize.css的作用就是重置这些默认样式，使样式表现一致。为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。本文不再详述，具体内容可以参考：https://blog.csdn.net/u013946061/article/details/108302849
本文完！
