У меня проблемы с настройкой Autoprefixer в моем конфиге webpack - PullRequest
0 голосов
/ 31 марта 2019

Я пытался скопировать многочисленные настройки веб-пакетов, но мне не удается заставить работать автозагрузку postcss-загрузчика. Я интенсивно использую Flexbox в своих проектах и ​​очень хочу, чтобы webpack добавил префиксы для старых браузеров при сборке пряжи. Сейчас SCSS компилируется в CSS, но префиксы не добавляются. Вот как выглядит мой конфиг веб-пакета:

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,
    }),*/
	]
});

1 Ответ

1 голос
/ 01 апреля 2019

Я считаю, что вам нужно вызвать его конструктор, т. Е. 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
          ...,
        ]
      }
    }
  ]
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...