Webpack 停止使用 postcss-variables-loader 加载 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",

，我必须更改 che 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 基本 var 之类的内容

:root {
  --monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono',
    'Monaco', monospace;
}

@custom-media --small-viewport (max-width: 780px);

，并且使用它导入到各种 .tsx 文件中，

import variables from './variables.css';

我无法理解 css 的整个结构及其加载方式是否必须更改，或者我可能还需要一个修复。

Answer 1

问题不在于加载器，而在于测试。缺少一个反斜杠。

应该是：

test: /\.variables\.css$/