简述对css工程化的理解

一、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会报错。