wepack css加前缀

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);
}
 
 
 

猜你喜欢

转载自www.cnblogs.com/zhx119/p/10926004.html