css3中新增的样式可能还存在兼容性问题 这个时候就需要我们添加浏览器内核的前缀
我们可以使用webpack自动帮我们添加 前缀
需要安装俩个 插件
cnpm i postcss-loader autoprefixer -D
// 在 webpack.config.js中
{
test:/\.css$/,// css-loader解析css语言 style-loader将其解析到浏览器上
use:[{
loader:'style-loader',
options:{ // 配置 单个模块之间的规则
insert:'head', // 插入到html文件 的head 顶部 用户自定义的可以覆盖书写的样式
}
},'css-loader','postcss-loader'] // 这里注意了 要写在 css-loader前面
},
然后就是在 目录下 新建一个 postcss的配置文件 postcss.config.js
module.exports={
plugins:[require('autoprefixer')]
}
到这里 还不行 你只是引入了 加前缀的插件 但并没有指明什么条件下 加前缀 还需要一个条件的文件
在当面目录下新建立一个 .browserlistsrc 文件
> 1% // 浏览器的市场占有 得超过 百分之1
last 2 versions // 浏览器的最后俩个版本
这样使用 npm run build mode:‘production’ // 生产模式下
查看生成的 css代码
确实帮我们添加上了 表示成功了