webpack5学习与实战-（十三）-postcss处理css3兼容性前缀

一，概述

postcss是一个用js工具和插件转换css代码的工具。比如说可以使用Autoprefixer插件自动获取浏览器流行度和能够支持的属性，并且根据这些数据帮助我们自动地为css规则添加前缀，将最新的css语法转化成大多数浏览器能够理解的语法。

二，具体的应用

第一步，安装依赖

npm i mini-css-extract-plugin css-loader postcss-loader -D 

这里需要解释一下，mini-css-extract-plugin插件是替换style-loader插件的（都是把css-loader解析后的代码添加到html上，不同的是style-loader直接添加到html上，而mini-css-extract-plugin是采用link资源的方式添加。所以这里直接使用mini-css-extract-plugin）

第二步，在module的rules中配置

 { 
    test: /\.(scss|css)$/, use: [ { 
    loader: MiniCssExtractPlugin.loader, options: { 
    // 当前的css所在的文件要相对到dist文件夹 publicPath: "../../" } }, "css-loader", "postcss-loader", "sass-loader" ] }, 

注意这里的use数组中的配置，是有顺序要求的，比如我这里是使用scss预处理器，还安装了sass-loader。
那么写出来的style.scss文件，先是经过sass-loader编译处理成常规的css,然后，再经由postcss-loader添加浏览器兼容前缀。再经过css-loader解析成webpack能够理解的模块。最后经由MiniCssExtractPlugin来通过link链接到index.html上。
写如下的css代码，会发现并没有添加兼容浏览器的 css3前缀，这是因为还需要安装一个插件来实现这一个功能。

第三步，安装autoprefixer

npm i autoprefixer -D 

然后再在项目根目录下创建一个文件：postcss.config.js,这个文件是专门用来配置css的插件的。

第四步，配置postcss.config.js

module.exports = () => { 
    return { 
    plugins: { 
    autoprefixer: { 
    overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" ] } } }; }; 

module.exports = () => { 
    return { 
    plugins: { 
    autoprefixer: { 
   } } }; }; 

而会在package.json中配置浏览器兼容：

"browserslist": [ "> 0.1%", "last 2 versions" ], 

尽量不要用browserslist最好放在.browserslistrc或者package.json内 postcss.config.js内 overrideBrowserslist 的优先级高于 package.json的browserslist，且不能为空，否则会不生效。 

于是重启项目，则会看到前缀了：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/11021.html