css工程化的出现主要是为了解决以下的几个问题：
- 宏观设计：css代码如何有组织的编写、如何拆分、模块结构该如何设计？
- 编码优化：通俗来讲就是如何能写出更好的css？
- 构建：怎样能让处理我的
css，才能实现打包结果最优呢？ - 可维护性：需求代码编写完，如何让后续的代码更改成本最小化，怎样能让同事轻松接收呢？
我总结了下面三个方向都是当下比较流行、适用性非常好的css工程化实践
- 预处理器：
lesssass等； - 工程化插件：
postCss - webpack loader 等
根据这三个方向，又可以发现其中的一些具有典型意义的子问题，下面我们逐个分析：
（1）预处理器：为什么要用？解决了哪些问题？
首先是为什么要使用预处理器，随着前端的业务越来越复杂，单靠传统的css编写样式，已经不能满足日常开发了，为什么这样说呢，主要有以下几点原因：
-
css的复用性上，我们希望能更进一步的优化css的目录结构，方便复用；
-
随着代码增多，我们希望写出结构清晰，简明易懂的
css代码，希望它的嵌套关系能一眼望穿，不希望看传统css那种一铺到底的写法；我们希望它具有一些编程特性，这样可以对其进一步的封装，减少一些无用重复的代码 -
能使用一些编程思想和编程特性意味着可以编写出更优质的代码，实现更优雅的代码结构，同时也能实现复用，这也意味着让其具有更强的拓展能力。这一些都得到满足，自然可维护性便会增强；
而以上三点正是传统的css无法实现，预处理的出现正好能解决掉这些问题。预处理基本都会具有以下的特性：
- 优雅嵌套的代码能力，通过不同的层级来映射不同
css间的属性。 - 可以在
css中定义变量。 - 提供了一些内置函数，同时也支持自定义函数。
- 运行在
css代码中进行继承和混合操作 - 支持循环语句
- 实现
css文件模块化、实现了复用
（2）PostCss 是怎样出现的，哪些场景需要用 PostCss？
首先它和预处理的不同点在于，预处理器处理的是类css，而PostCss 处理的是css 本身。功能有点类似babel, babel可以将高版本的js 代码转换成低版本的js代码。PostCss的功能亦然类似：它可以将一些浏览不支持的先进css语法，编译成浏览器支持的，可以自动为一些需要额外兼容的语法增加浏览器私有前缀。更强大的是，PostCss有着强大的插件，可以支持各种各样的扩展，进一步的增强了css的能力
PostCss的使用场景有：
- 提供
css代码的可读性； - 当
css代码需要适配低版本的浏览器的时候，PostCss的Autoprefixer插件可以帮我们实现自动添加浏览器私有前缀； - 运行我们编写面向未来的
css, 也就是当前浏览器无法兼容的css代码 PostCss能够帮助我们编译css next代码
（3）WebPack能处理css吗？如何处理的
WebPack在loader的帮忙下，是可以对css进行处理的
怎样处理的
WebPack中操作css需要使用最为关键的两个loader：css-loader和style-loader
这两个loader都分别做了哪些事情呢？
css-loader：导入css模块，对css代码进行编译处理style-loader：创建style标签，将css内容写入标签
注意
在使用这两个loader过程中，css-loader一定要放在style-loader的前面，因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解你写的东西，它会无情报错。
