Estoy migrando una aplicación de paquete web basada en versiones antiguas a algunas nuevas y tengo problemas con la carga de variable.css que ahora parece que ya no se reconoce

 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",

El antiguo webpack.config.js solía ser:

 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', }

Ahora, estoy con nuevas versiones.

 "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",

y tuve que cambiar che webpack.config.js para incluir el nuevo 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',},], },

El archivo variable.css incluye algunas variables básicas de css como

 :root { --monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace; } @custom-media --small-viewport (max-width: 780px);

y se importa a varios archivos .tsx usando solo

 import variables from './variables.css';

No puedo entender si toda la estructura de css y la forma en que se cargan deben cambiar o si hay una solución más que podría necesitar.