@Dryzhkov

Как настроить автопрефиксер для webpack?

Здравствуйте столкнулся с проблемой по настройке для вебпака плагина автопрефиксер, в интернете нагуглил старые данные, которые не работают с 5-й версией. Проблема в том, что оф документация советует создавать отдельный файл для конфигов postcss, что естественно не удобно.

Подскажите, пожалуйста, кто то может быть как то настраивал без этого файла?
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
@skeevy
Frontend WebDev
Когда у вас большой конфиг, логичнее все сторонние опции держать отдельно.
Если же вам не подходит, то обращайтесь к документации. И прямо там, если полистать ниже, вы увидите такой пример:

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: {
              "postcss-import": {},
              "postcss-short": { prefix: "x" },
            },
          },
        },
      },
    ],
  },
};


А так же, там есть пометки, что данный подход deprecated, и когда-нибудь вам придется переписать это в отдельный конфиг. Так почему не сделать это сразу?)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Just__Den
FULL STACK
держи для webpack 5. Вариант для прода

{
        test: /\.s?css$/,
          use: [
            MiniCssExtractPlugin.loader,
		    {loader: 'css-loader', options: {sourceMap: false }},		    
			{
				loader: 'postcss-loader',
				options: {
				  postcssOptions: {
					plugins: function () {
					  return [
						require('autoprefixer')
					  ];
					}
				  }
				}
			},
			'sass-loader'
          ]
      }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы