使用 Webpack v5 导出 CSS 时出现导出错误

Question

WARNING in ./src/components/desktop/layout/AutoAuth.js 48:12-21
export 'layerHide' (imported as 'layerHide') was not found in '../../../css/layout.css' (possible exports: default)
@ ./src/components/desktop/pages/LoadUser.js 4:0-42 6:42-50
@ ./src/router.js 60:0-59 119:15-23
@ ./src/index.js 8:0-30 31:83-89

对于导入 CSS 的每个文件，我都会收到此警告。我最近正在更新到 Webpack v5。

这就是在每个文件中导入的方式：

import {layerShow, layerHide, siteWrapper} from "../../../css/layout.css";

webpack.config.js 文件中的相关块：

      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[local]--[hash:base64:5]",
              }
            }
          },
          "postcss-loader",
          'sass-loader',
        ]
      },

模块版本：

sass-loader: 14.1.0
postcss-loader: 8.1.0
css-loader: 6.10.0
mini-css-extract-plugin: 2.8.0
webpack: 5.90.1

感谢任何帮助，我已经尝试解决这个问题几个小时了。

我尝试更改 CSS 文件的目录，使用别名，尝试 webpack.config.js 中 css-loader 选项的不同组合。我更新之前没有这个问题。

Answer 1

您尝试过

namedExport: true

或

css-loader

的选项吗？