使用webpack的css autoprefixer

Question

我一直在尝试使用LESS和Autoprefixer配置webpack,但autoprefixer似乎不起作用.我的css或更少的文件不是自动反射的.示例: display: flex停留display: flex

我把我的webpack配置放在下面:

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

Answer 1

如Autoprefixer文档中所述，“ Autoprefixer使用Browserslist”

根据Browserslist文档，建议将Browserslist放在中package.json。

所以这是对webpack使用自动前缀的另一种方法：

安装postcss-loader和autoprefixer：

npm i -D postcss-loader autoprefixer

webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/,
      exclude: /node_modules/, 
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    },
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader', 'postcss-loader'] 
    },
    ...
  ]
}

根据postcss文档，postcss-loader应当放在css-loader和之后style-loader，但要放在其他预处理程序加载程序（例如）之前sass|less|stylus-loader，如果使用的话。

package.json

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

这样，您不需要postcss.config.js文件。

Answer 2

所以发现了问题.傻我,postcss块需要直接在webpack配置下,我把它放在模块块中.我的错.

编辑:这是应该如何:

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

因此,不必将其放在模块块中,我必须将其直接放在主块下面,如上所示.