css预处理器和后处理器

蚂小蚁
1,462 阅读3分钟

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

前言

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

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

saas-loader/less-loader

  1. 将saas、less语法编译为css语法
  2. 处理@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官网：

  1. 解决全局css问题 postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。

  2. 提前使用先进的 CSS 特性 autoprefixer/postcss-preset-env

  3. 更佳的 CSS 可读性 precss 囊括了许多插件来支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。 postcss-utilities 囊括了最常用的简写方式和书写帮助。

  4. 图片和字体 postcss-assets 可以插入图片尺寸和内联文件。 postcss-sprites 能生成雪碧图。 postcss-inline-svg 允许你内联 SVG 并定制它的样式。 postcss-write-svg 允许你在 CSS 里写简单的 SVG。

  5. 提示器（Linters） doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。

功能这么强大，那么postcss是如何工作的？

与babel、eslint类似，它也是用ast来进行转换的：

  1. 首先拿到原始字符串，对字符串进行语法、词法分析（tokenizer）

image.png 2. 通过解析器（Parser），将分析后的结果转化为ast抽象语法树

image.png 3. 分析ast，替换关键位置的字符 4. ast转化为结果字符串，输出

其中具体的逻辑可以查看post-css源码进行学习

css-loader

  1. css模块化

    {
    loader: "css-loader",
    options: {
        modules: true,
        importLoaders: 1,
    },
}

    开启css module之后设置全局样式必须使用特殊语法:global()

  2. 组合样式

    :local(.c1){
     color:red;
 }
 
 :local(.c2){
     composes:c1;
     background:blue;
 }
 // 编译后复用c1类名
 exports.locals = {
   c1: "_23_aKvs-b8bW2Vg3fwHozO",
   c2: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",
 };

  3. 导入样式

    :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"]

总结

阅读完文本后相信读者已经对css预处理器和后处理器了如指掌，并且还知道如何在webpack中进行配置；面试的时候应该能够对这部分内容从容应对。

avatar
文章
阅读
粉丝