一、css工程化解决了哪些问题
1、宏观设计：css如何组织、拆分、设计模块结构
2、编码优化：如何更好地编写css
3、构建：如何处理css，使打包结果最优
4、可维护性：最小化后续的变更成本
二、针对问题，如何解决
1、使用less、scss等预处理器
2、使用工程化插件，如PostCss
3、webpack loader等
三、为什么要使用预处理器？预处理器的好处
预处理器支持我们写一种类似CSS、但实际并不是CSS的语言，然后将其编译成CSS。预处理器的特性可以更好的优化css，解决css的一些问题。
预处理器的特性：
1、嵌套能力，可以通过嵌套直观的反应css的层级关系
2、支持定义css变量
3、提供计算函数
4、允许对代码片进行extend和mixin
5、支持循环语句使用
6、支持将css模块化，支持复用
四、PostCss是如何工作的
PostCss和预处理器的不同就在于，预处理器处理的是类CSS，而 PostCss 处理的就是 CSS 本身。
PostCss可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。
PostCss的使用场景：
1、提高css的可读性，做类似预处理器的工作
2、帮助css适配低版本浏览器
3、允许我们编写面向未来的css，帮助编译css next
五、webpack如何处理css
webpack在loader的辅助下，是可以处理css的。
webpack通过安装css-loader和style-loader处理css，css-loader的作用是导入 CSS 模块，对 CSS 代码进行编译处理，style-loader的作用是创建style标签，把 CSS 内容写入标签。
在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，webpack会报错。
