I am migrating a webpack application based on old versions to some new ones and I am getting troubles with the load of variable.css which now seems not recognized anymore
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> :root {
| --monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono',
| monospace;
"css-loader": "2.1.1",
"postcss-loader": "3.0.0",
"typescript": "4.0.3",
"webpack": "4.30.0",
"webpack-dev-server": "3.11.0",
Old webpack.config.js used to be:
test: /\.css$/,
exclude: /variables\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader', options: { sourceMap: true, },
},
'postcss-loader',
],}),
},
{
test: /variables\.css$/,
loader: 'postcss-variables-loader?es5=1',
}
Now, I am with new versions
"postcss": "^8.4.8",
"postcss-loader": "^6.2.1",
"mini-css-extract-plugin": "^2.6.0",
"typescript": "^4.6.2",
"webpack": "^5.70.0",
"webpack-dev-server": "^4.7.0",
and I had to change che webpack.config.js to include the new mini-css-extract-plugin
{
test: /\.css$/i,
exclude: /variables\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader',],
},
{
test: /\.variables.css$/,
use: [ {loader: 'postcss-variables-loader?es5=1',},],
},
The file variable.css includes some css basic var like
:root {
--monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono',
'Monaco', monospace;
}
@custom-media --small-viewport (max-width: 780px);
and it is imported into various .tsx files using just
import variables from './variables.css';
I cannot understand if the entire structure of css and the way they are loaded must change or there's one more fix I might need.
The trouble is not the loader, but the test. A backslash was missing.
It should be:
test: /\.variables\.css$/