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

转载于:https://www.cnblogs.com/zhx119/p/10926004.html