I'm working on a home-grown webpack config, and one of the pieces of it is PostCSS. Here are my PostCSS versions:
"postcss": "^7.0.35",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-import": "^13.0.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack": "^5.4.0",
My problem is that when NODE_ENV=development, I get this message spammed in the console when running the webpack-dev-server:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
I did set plugins, here is my postcss.config.js:
const postcssFlexbugsFixes = require('postcss-flexbugs-fixes');
const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');
module.exports = {
plugins: [
postcssImport,
postcssFlexbugsFixes,
postcssPresetEnv({ stage: 3 })
]
};
And here is how I'm using it with the postcss-loader (yes, it's in a function because of how the config is designed):
const postCssConfig = require('../files/postcss.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const loaders = (isCssModule) => ([
process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 3,
modules: isCssModule
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: postCssConfig
}
},
'resolve-url-loader',
'sass-loader'
]);
If I run the webpack-dev-server with everything exactly the same configuration except NODE_ENV=production, everything works. For the moment, I'm going to just disable PostCSS in development. However, this seems very strange. I'm not an expert with PostCSS, I'm wondering if it is a known issue or something I'm doing wrong.