webpack 打包css需要加前缀,需要安装 postcss-loader及autoprefixer,安装好后,在webpack设置如下:
module: {//模块
rules: [ //规则:css-loader 解析@import这种语法的
// style-loader它是把css插入到head标签中
//loader 的特点 作用单一 ,多个loader需要[]
//loader的执行顺序默认是从右向左执行
//loader还可以写成对象
{
test: /.css$/,
use: [
MimiCssPlugin.loader,
'css-loader',
'postcss-loader',
]
},
这里要把css-loader放在最上面postcss-loader放在最下面不然要报错,此外还要设置postcss.config.js,配置代码如下:
module.exports = {
plugins:[require('autoprefixer')]
}
配置好后打包后css就会有前缀,打包前css代码如下:
body{
background: red;
transform: rotate(45deg);
}
打包后css代码如下:
body{
background: red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}