【全面系统讲解CSS】学习笔记-第九章 CSS工程化方案

一、概述

在这里插入图片描述

1.1、PostCSS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、PostCSS插件的使用

全局安装postcss工具。

npm install postcss-cli -g

在这里插入图片描述
编译css
在这里插入图片描述

2.1、autoprefixer的使用

首先需要安装autoprefixer插件

npm install autoprefixer

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

2.2、postcss-import的使用

在这里插入图片描述
在这里插入图片描述
如上图,如果是这样引入css文件的话,就会调用两个请求。如果用下面的这个插件后重新编译,那么就会合并css文件。
在这里插入图片描述

2.3、cssnano的使用

cssnano是用来压缩代码的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4、cssnext的使用

在这里插入图片描述
在这里插入图片描述
这个插件也需要npm安装。
在这里插入图片描述
执行编译后
在这里插入图片描述

2.5、precss的使用

在这里插入图片描述
在这里插入图片描述
需要安装过插件。配置执行后如下面的图。
在这里插入图片描述
在这里插入图片描述

2.6、glup-postcss构建工具的使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、webpack插件的使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
html引用了打包后的js文件。
在这里插入图片描述
在这里插入图片描述

4.1、webpack处理css

安装css加载插件
在这里插入图片描述
创建配置文件,webpack.config.js是webpack配置文件的默认文件名。
在这里插入图片描述
PS:后期继续

发布了76 篇原创文章 · 获赞 16 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_38657051/article/details/103361579