什么是 PostCss
- CSS 工程化面临着诸多问题，而解决这些问题的方案多种多样，如果把 CSS 单独拎出来看，光是样式本身，就有很多事情要处理，既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？
- PostCss 就是基于这样的理念出现的，PostCss 类似于一个编译器，可以将样式源码编译成最终的 CSS 代码；
![]( "编译器")
- 看上去是不是和 LESS、SASS 一样呢？但 PostCss 和 LESS、SASS 的思路不同，它其实只做一些代码分析之类的事情，将分析的结果交给插件，具体的代码转换操作是插件去完成的 （这一点有点像 webpack，webpack 本身仅做依赖分析、抽象语法树分析，其他的操作是靠插件和加载器完成的）；
![]( "代码转换操作是插件去完成")
- postcss 和 webpack 类似，有自己的配置文件，该配置文件会影响 postcss 的某些编译行为，配置文件的默认名称是 postcss.config.js，例如：
module.exports = { map: false, // 关闭 source-map }
安装和编译
# 安装
npm i -D postcss
# 安装 postcss-cli 编译 postcss 文件
npm i -D postcss-cli
# 编译
postcss 源码文件 -o 输出文件
常用插件
只使用 postcss 是没有多少意义的，要让它真正的发挥作用，需要插件；
postcss-preset-env
-
过去使用 postcss 的时候，往往会使用大量的插件，它们各自解决一些问题，这样导致的结果是安装插件、配置插件都特别的繁琐；于是出现了这么一个插件 postcss-preset-env，它称之为 postcss 预设环境，大意就是它整合了很多的常用插件到一起，并完成了基本的配置，只需要安装它一个插件，就相当于安装了很多插件了，安装好该插件后，在 postcss 配置中加入下面的配置：
module.exports = { plugins: { "postcss-preset-env": {} // {} 中可以填写插件的配置 } } -
实现自动的厂商前缀：某些新的 css 样式需要在旧版本浏览器中使用厂商前缀方可实现，该功能在不同的旧版本浏览器中都不一样；
csscss::placeholder { color: red; }/* 附带厂商前缀 */ ::-webkit-input-placeholder { color: red; } ::-moz-placeholder { color: red; } :-ms-input-placeholder { color: red; } ::-ms-input-placeholder { color: red; } ::placeholder { color: red; } -
要完成这件事情，需要使用 autoprefixer 库，而 postcss-preset-env 内部包含了该库，自动有了该功能，如果需要调整 兼容的浏览器 范围，可以通过下面的方式进行配置：
方式 1：在 postcss.config.js 的 postcss-preset-env 的配置中加入 browsersmodule.exports = { plugins: { "postcss-preset-env": { browsers: [ "last 2 version", "> 1%" ] } } }方式 2【推荐】：添加 .browserslistrc 文件，并填写如下配置内容last 2 version > 1%方式 3【推荐】：在 package.json 的配置中加入 browserslist，browserslist 是一个多行的 （数组形式的） 标准字符串，可以通过 网站 对配置结果覆盖的浏览器进行查询，查询时，多行之间使用英文逗号分割；// 默认情况下，匹配的结果求的是并集 "browserslist": [ "last 2 version", // 浏览器的兼容最近期的两个版本 "> 1% in CN", // 匹配中国大于 1% 的人使用的浏览器 "`not ie <= 8", // 排除掉版本号小于等于 8 的 IE 浏览器 ]
postcss-color-function
less
css
/* 该插件支持在源码中使用一些颜色函数（文件后缀为 .pcss） */
body {
color: color(#aabbcc); /* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */
color: color(#aabbcc a(90%)); /* 将颜色#aabbcc透明度设置为90% */
color: color(#aabbcc red(90%)); /* 将颜色#aabbcc的红色部分设置为90% */
color: color(#aabbcc tint(50%)); /* 将颜色#aabbcc调亮50%（更加趋近于白色），类似于less中的lighten函数 */
color: color(#aabbcc shade(50%)); /* 将颜色#aabbcc调暗50%（更加趋近于黑色），类似于less中的darken函数 */
}
/* 编译后 */
body {
/* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */
color: rgb(170, 187, 204);
/* 将颜色#aabbcc透明度设置为90% */
color: rgba(170, 187, 204, 0.9);
/* 将颜色#aabbcc的红色部分设置为90% */
color: rgb(230, 187, 204);
/* 将颜色#aabbcc调亮50%（更加趋近于白色），类似于less中的lighten函数 */
color: rgb(213, 221, 230);
/* 将颜色#aabbcc调暗50%（更加趋近于黑色），类似于less中的darken函数 */
color: rgb(85, 94, 102);
}
在 webpack 中使用 postcss
JavaScript
JavaScript
// webpack 配置文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
devtool: "source-map",
module: {
rules: [
{
test: /\.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
minimize: true,
},
},
"postcss-loader",
"less-loader"
],
},
],
},
devServer: {
open: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
// postcss.config.js
module.exports = {
plugins: {
"postcss-preset-env": {
browsers: [
"last 2 version",
"> 1%"
]
}
}
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
css 工程化👉 预编译器 less、sass
上一篇
评论
