Question

我正在使用@zeit/next-css将css文件导入到我的组件和页面文件中，但这会引发此错误

./styles/navbar.css将此css文件导入组件中的navbar.js中，但出现此错误

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

Answer 1

升级css-loader后，我遇到了同样的问题，但是我解决了。

如果检查css-loader自述文件，那么我会注意到“ localIdentName”已移入模块密钥（这可能不是最近的更改，只是我的工件很旧）。我当前的工作配置是：

{
    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
    }
}

Answer 2

要临时解决您的问题，请从以下软件包中删除“ ^”符号：

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

这些软件包的更新版本似乎有问题。

Answer 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：'[名称] [本地] [hash：base64：5]'

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

如果添加，它会给出：-

ValidationError：无效的选项对象。 CSS Loader已使用进行了初始化与API模式不匹配的选项对象。

选项的未知属性“最小化”。这些属性有效：对象{url？，import？，modules，sourceMap？，importLoaders？，localsConvention？，onlyLocals？ }

Answer 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]',
            },
          }),

ValidationError：无效的选项对象。 CSS Loader已使用与API模式不匹配的选项对象进行了初始化

4 个答案: