css - 我在我的 webpack 配置中设置 Autoprefixer 时遇到问题

Question

我试过复制许多 webpack 设置，但我似乎无法让 postcss-loader Autoprefixer 工作。我在我的元素中大量使用 Flexbox，我真的想让 webpack 在 yarn build 上为旧浏览器添加前缀。现在，SCSS 被编译成 CSS，但没有添加任何前缀。这是我的 webpack 配置当前的样子:

webpack.js

  const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var autoprefixer = require('autoprefixer');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
	output: {
		filename: 'app.bundle.min.js',
		path: path.join(__dirname, '../../assets')
	},

	module: {
		rules: [
			{
				test: /\.(scss|css)$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader: 'css-loader',
							options: { sourceMap: true, minimize: true }
						},
						{
							loader: 'postcss-loader',
							options: {
								ident: 'postcss',
								plugins: [require('autoprefixer')]
							}
						},
						{
							loader: 'sass-loader',
							options: { sourceMap: true, minimize: true }
						}
					],
					fallback: 'style-loader'
				})
			}
		]
	},

	plugins: [
		new ExtractTextPlugin('app.bundle.min.css'),

		new webpack.LoaderOptionsPlugin({
			options: {
				postcss: [autoprefixer()]
			}
		}),

		// Minimize JS
		new UglifyJsPlugin({ sourceMap: true, compress: true })

		// Minify CSS
		/*new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),*/
	]
});

Answer 1

我相信你需要调用它的构造函数，即 require('autoprefixer')()

我在 PostCss Loader README 中看到了这个.

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('autoprefixer')({...options}), // calls constructor with optional options
          ...,
        ]
      }
    }
  ]
}