Vue项目实战（08）- css预处理器

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的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点，那它们有什么区别和关联呢？

1. sass和scss是两个不同的东西，只是相似！
2. sass借鉴了ruby语言的规范很严格！代码里面也没有大括号！（这对于习惯用css{}的前端人员很难适应！）
3. 于是就出现了scss，完美兼容css，还能有sass的功能！
4. 如果用的是webpack-simple模版用sass的话就是lang="sass"，sass是没有{}括号的，如果有{}会抱错。
5. 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标签。

步骤：

1. 写一个公共的scss文件(app.scss)把所有模块的样式按照顺序都引入一遍
2. 先引公共变量，再引公共样式，最后引入每个模块
3. 最后在app.vue里面或者main.js主入口里面import app.scss，最后界面就一个style标签。

特点：

• 好处：所有样式集中管理，样式之间可以互相覆盖，可以随意覆盖子组件样式，公共变量和公共样式可以随意使用。
• 弊端：所有模块都需要独立的样式文件，导致样式文件过多不好管理，互相覆盖容易产生bug（为了不互相覆盖，每个样式都需要写在 父样式的嵌套里面，引入的时候也需要注意顺序），
• 公共样式和变量：公共样式和公共属性会在引入根样式文件（app.scss）里面第一个引入，这样后面引入的样式就可以随意使用。

3. element项目分析

到这里，我们对css预处理器有一个大致的了解了，并知道如何使用，下面分析vue-element-admin项目的使用情况。

首先简要描述一下项目使用的步骤：

1. package.json引入sass和sass-loader
2. 执行命令（cnpm install），安装sass
3. main.js，应用全局scss样式
4. 单个界面（.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

本文完！