PostCSS?
指将css文件通过post方式转换为另一个css文件。
PostCSS本身是一个功能比较单一的工具,它提供了一种方式用JavaScript代码来处理CSS。利用postCSS可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。(这里我们在进行一个工程化的处理叫做postCSS,webpack也是用于进行工程化的处理打包等)
官方网址:https://postcss.org/
安装:
1.安装node环境 然后命令行窗口输入node -v查看node是否安装成功,成功的话会输入node的版本号
2.然后在命令行窗口输入nmp install postcss-cli -g以安装postcss-cli
3.-o (用于将css工程化,如 postcss src/demo.css -o dist/demo.css )、
-w(事件监听,指转换前的css通过保存后,转换后的 css也会跟着改变,而不用时时刻刻去命令行窗口通过-o来进行转换。在工 程化的后面加上 -w即可,要退出的话ctrl+c按两下即可退出)
4.postcss.config.js(配置文件,配置我们要使用的插件)
PostCSS常用插件?
autoprefixer:(指给浏览器自动添加前缀)
postcss-import:(将CSS进行合并操作)
cssnano:(对CSS进行代码压缩处理) cnpm i 插件名
postcss-cssnext:(处理比较高级的CSS代码,即把CSS降级以适用低浏览器)
stylelint:(语法检测插件)
postcss-sprites:(自动生成精灵图即雪碧图)
....
引入插件方式: const 变量名= require( ‘插件名’);