PostCss是一个用 JavaScript 工具和插件转换 CSS 代码的工具

  1. 利用从 Can I Use 网站获取的数据为 CSS 规定增加特定厂商的前缀。 Autoprefixer 主动获取浏览器的风行度和可能反对的属性，并依据这些数据帮你主动为 CSS 规定增加前缀。
  2. PostCSS Preset Env帮你将最新的 CSS 语法转换成大多数浏览器都能了解的语法，并依据你的指标浏览器或运行时环境来确定你须要的 polyfills，此性能基于 cssdb 实现。
  3. CSS模块能让你你永远不必放心命名太大众化而造成抵触，只有用最有意义的名字就行了。
  4. 通过应用 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 versionnot 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",  },