持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

css预处理器和后处理器属于前端工程化的重要部分，预处理器：将其他语法的样式文件编译为浏览器认识的css文件，后处理器：对css文件进行压缩，处理浏览器兼容性等等；主要有sass-loader/less-loader、postcss-loader、css-loader、style-loader

loader的顺序是从右到左依次处理我们的样式文件，最先处理的当然是我们的预处理器：saas-loader、less-loader

saas-loader/less-loader

将saas、less语法编译为css语法

处理@import，其实我们的@import经过loader处理之后，会将import进来的代码拷贝进来 a.scss

@import "b.scss"
html{
    overflow:hidden;
b.scss
body{
    height:100%;
编译后a.scss：
body{
    height:100%;
html{
    overflow:hidden;
重点来了：saas的@import和css的@import有什么不同呢？saas的@import是在编译过程处理，而css的@import则需要在渲染时发出多个http请求
postcss-loader
postcss是万能的，既能做预处理器也能做后处理器
postcss丰富的功能是由它的插件系统所提供的，例如移动端经常需要转换为rem单位，所以可以使用px2rem的postcss插件来进行编译时转换
postcss能做什么？以下引自postcss官网：
解决全局css问题
postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
提前使用先进的 CSS 特性
autoprefixer/postcss-preset-env
更佳的 CSS 可读性
precss 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。
postcss-utilities 囊括了最常用的简写方式和书写帮助。
图片和字体
postcss-assets 可以插入图片尺寸和内联文件。
postcss-sprites 能生成雪碧图。
postcss-inline-svg 允许你内联 SVG 并定制它的样式。
postcss-write-svg 允许你在 CSS 里写简单的 SVG。
提示器（Linters）
doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
功能这么强大，那么postcss是如何工作的？
与babel、eslint类似，它也是用ast来进行转换的：
首先拿到原始字符串，对字符串进行语法、词法分析（tokenizer）
2. 通过解析器（Parser），将分析后的结果转化为ast抽象语法树
3. 分析ast，替换关键位置的字符
4. ast转化为结果字符串，输出

其中具体的逻辑可以查看post-css源码进行学习
css-loader
css模块化
    loader: "css-loader",
    options: {
        modules: true,
        importLoaders: 1,
开启css module之后设置全局样式必须使用特殊语法:global()
:local(.c1){
     color:red;
 :local(.c2){
     composes:c1;
     background:blue;
 // 编译后复用c1类名
 exports.locals = {
   c1: "_23_aKvs-b8bW2Vg3fwHozO",
   c2: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",
:local(.buttonGroup) {
  composes: button from "library/button.css";
  background: red;
style-loader
css样式提取为style标签
与之相反的有一个插件“mini-css-exreact-plugin”，它是将样式提取成一个文件
这两者有什么区别呢？
style标签是作为html一部分直接与dom同步解析的，而css文件则需要下载之后再进行解析，增加了首屏数据的加载时间，如果为了极致的性能优化，尽量将一部分样式用style-loader注入，然后其他的一部分使用css文件的形式，不要全部都用一个css文件，那样的话文件体积会非常大
loader的顺序
文章的标题顺序就是loader的执行顺序，配置如下["style-loader","css-loader","postcss-loader","sass-loader"]