一、什么是PostCss
PostCss
就是通过js
代码来第css
进行转换,比如给css
加上浏览器前缀。当然这些工作也是需要一些插件来一起完成的。
二、在命令行执行postcss
1、首先安装postcss postcss-cli,
npm install postcss postcss-cli -D
2、安装所需要的依赖(autoprefixer是填充浏览器前缀的)
npm install autoprefixer -D
3、执行命令
npx postcss --use autoprefixer -o end.css test.css
三、在开发环境中使用postcss
我们不能一直在命令行环境中使用postcss
,我们也可以在webpack
中使用postcss
,此时需要安装postcss-loader
,postcss-loader
是依赖于postcss
的。npm install postcss-loader -D
在webpack.config.js中配置
{
test:/\.css$/,
use:{
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:[
require("autoprefixer")
]
}
},
}
}
也可以在外部的postcss.config.js
的文件中进行配置。
module.exports = {
plugins:[
require("autoprefixer")
]
}
postcss-preset-env
也是postcss
的一个插件,类似于babel
的预设。postcss-preset-env
中存在着一些插件、帮助我们将一些现代的CSS
特性,转成大多数浏览器认识的CSS
,并且会根据目标浏览器或者运行时环境
添加所需的polyfill
,同时也可以自动帮助我们添加autoprefixer
module.exports = {
plugins:[
require("postcss-preset-env")
]
}