Webpack已停止使用postpass变量加载程序加载CSS变量

Question

我正在将一个基于旧版本的webpack应用程序迁移到一些新版本，并且我在加载variable.css时遇到了问题，现在似乎无法识别

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

旧的webpack.config.js曾经是：

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

现在，我使用新版本的

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

我不得不更改切换器webpack.config.js以包括新的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',},],
},

文件variable.css包括一些css基本变量，如

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

并且仅使用将其导入到各种CCD_ 6文件中

import variables from './variables.css';

我不明白css的整个结构和加载方式是否必须更改，或者我可能还需要一个修复程序。

Answer 1

问题不在于加载程序，而在于测试。缺少反斜杠。

应该是：

test: /.variables.css$/