专业的建设网站服务郑州企业健康码二维码怎么弄就是放在门口让人扫

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