ValidationError：无效的选项对象。 CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化答案

【问题标题】：ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schemaValidationError：无效的选项对象。 CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化
【发布时间】：2021-03-27 17:50:42
【问题描述】：

我正在使用 @zeit/next-css 将 css 文件导入到我的组件和页面文件中，但它向我抛出了这个错误

./styles/navbar.css 在我的 navbar.js 组件中导入此 css 文件，我收到此错误

ValidationError: Invalid options object. CSS Loader has been initialised using
     an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }

我的next.config.js 放置在package.json 所在的位置

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

我的包 json

{
  "name": "transfer-to",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "isomorphic-unfetch": "^3.0.0",
    "next": "9.0.7",
    "react": "16.10.2",
    "react-dom": "16.10.2"
  }
}

【问题讨论】：

直到今天我都没有任何问题，突然在 yarn dev 之后我遇到了这个问题

标签： javascript reactjs next.js

【解决方案1】：

我在更新 css-loader 后遇到了同样的问题，但我解决了。

如果您查看 css-loader 自述文件，那么我注意到“localIdentName”移入了 modules 键（这可能不是最近的更改，只是我的工件是旧的）。我目前的工作配置是：

{
    loader: require.resolve('css-loader'),
    options: {
        importLoaders: 1,
        modules: true,
        modules : {
        localIdentName: '[name]__[local]__[hash:base64:5]',
        },
    },
},

旧的错误配置是：

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "[name]__[local]___[hash:base64:5]",
        sourceMap: isDevelopment
    }
}

【讨论】：

【解决方案2】：

为了临时解决您的问题，请从这些软件包中删除“^”符号：

"dependencies": {
    "@zeit/next-css": "1.0.1",
    "@zeit/next-sass": "1.0.1",
    "next": "9.0.2",
    "node-sass": "4.12.0"
    ...
  }

这些包的更新版本看起来像一个错误的更新版本。

【讨论】：

【解决方案3】：

在 webpack.config.js

{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            //localIdentIName: '[name]__[local]__[hash:base64:5]'
          }),
          sideEffects: true,
    }

我在 localIdentName 上发表了评论，它奏效了。

//localIdentIName: '[name][local][hash:base64:5]'

评论可能是错误的。但我仍需要对此进行更多调查。

如果我添加它会给出：-

ValidationError：无效的选项对象。 CSS Loader 已使用初始化与 API 架构不匹配的选项对象。

options 具有未知属性“最小化”。这些属性是有效的： object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }

【讨论】：

【解决方案4】：

如果您正在更改配置文件以加载 css。那么你的对象应该如下所示
我的 React 版本是 6.14.11

       {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
            modules : {
              localIdentName: '[name]__[local]__[hash:base64:5]',
            },
          }),

【讨论】：