PostCss是一个用 JavaScript 工具和插件转换 CSS 代码的工具
- 利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
- PostCSS Preset Env帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。
- CSS模块能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。
- 通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。
项目中引入postcss比如常见的兼容性问题，有些css样式在某些浏览器无法展示，因为不兼容。
此时需要引入postcss工具，利用Autoprefixer获取浏览器流行度和能够支持的属性，根据postcss-preset-env把CSS 语法转换成大多数浏览器都能理解的语法。这是处理兼容性css代码的流程。
这里有个问题，如何知道是什么浏览器，不同浏览器支持的css语法不一样。这里需要引入一个新的工具browserlist，用于在不同前端工具之间共用目标浏览器和node版本的配置工具。使用 Can I Use 网站的数据来查询浏览器版本范围。
简单来说，就是用来控制浏览器版本的一个插件。
Broswerlist配置方式可以再package.json中配置
"broswerslist":[
">0.01%",
"last 2 version",
"nodt dead"
]或者在根目录下新建.browserlistrc文件写入
> 0.01%
last 2 version
not dead配置案例
普通的css,less文件在webpack中的配置如下
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
],
},
],
},加入postcss后
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require("autoprefixer"),
require("postcss-preset-env"),
],
},
},
},
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"],
},
},
},
"less-loader",
],
},
],
},这样的配置有公共代码，不利于阅读，可以提取出postcss的公共配置，根目录下新建postcss.config.js文件，这里的文件名不能更改，提取公共配置
module.exports = {
plugins: [require("postcss-preset-env")],
};webpack中的配置就可以简写为
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
'postcss-loader',
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
'postcss-loader',
"less-loader",
],
},
],
},当前这种配置在实际运用中可能存在问题
例如
.title {
transition: all 0.5s;
user-select: none;
}再另一个文件中index.css通过@import引入
@import './test.css';
.title{
color: #12345678;
}此时的@import引入了test.css，可以正常引入，postcss-loader拿到之后index.css代码之后不需要额外处理就把代码交给了css-loader，css-loader处理@import的test.css。也可以正常解析，不过没有通过postcss-loader处理，而直接交给了style-loader进行展示，对于这种情况，此时需要一个操作，css-loader拿到之后能够回退一步，交给postcss-loader重新处理，这里需要引入importLoaders属性更改webpack配置
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{
loader:'css-loader',
options:{
importLoaders:1 // 回退一步
}
},
'postcss-loader',
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
'postcss-loader',
"less-loader",
],
},
],
},这样配置之后，就可以正常转换css代码，添加对应的浏览器前缀。做到兼容的目的
案例对应package.json配置版本
"devDependencies": {
"autoprefixer": "^10.3.1",
"css-loader": "^6.2.0",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"style-loader": "^3.2.1",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^6.7.0",
"webpack": "^5.47.1",
"webpack-cli": "^4.7.2",
},