配置postCSS自动添加css的兼容前缀
前言
在这里我使用VScode为编辑器
html文件中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/button.js"></script></head><body><input type="text" placeholder="css样式兼容问题"></body></html>
css文件中
::placeholder{color:red;}
执行打包 npm run start 命令后
360极速浏览器效果
IE浏览器效果
最终结果很显然，IE中样式没有任何变化
应用场景：当我们在360极速浏览器中定义了文本的样式，在IE浏览器中不会显示定义的文本样式，这个时候就需要在样式中加上浏览器前缀了
运行 npm i postcss-loader autoprefixer -D命令
项目根目录中创建 postcss 的配置文件postcss.config.js,并初始化如下配置:
postcss.config.js代码如下：
const autoprefixer = require('autoprefixer');module.exports = {plugins:[autoprefixer]}
在 webpack.config.js 的module -> rules数组中，修改css的loader 规则如下:
在css配置中额外增加一个postcss-loader
//所有第三方文件模块的匹配规则module:{rules:[//配置css{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},//配置less{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置scss{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},] }
实现vscode终端 npm run start 命令
360极速浏览器效果
IE浏览器效果
这样就完成css样式的兼容配置操作了
