数据验证错误：无效的选项对象。CSS加载器已经使用一个与API模式不匹配的选项对象进行初始化。

Question

我正在使用@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();

我的package.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"
  }
}

- user12143749

---

直到今天我没有任何问题，突然在运行 yarn dev 后我遇到了这个问题。 - nima

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

- roshandeep singh

Answer 2

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

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

这些软件包的更新版本似乎存在缺陷。

- nima

Answer 3

我遇到了同样的问题， 'ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.' 我尝试了所有的解决方案，但都无法解决我的问题。 最后我删除了那两行代码：

module:true

localIdentName: '[name][local][hash:base64:5]',

我创建了一个名为layout.module.css的布局CSS文件，在JS文件中像下面这样导入并使用：

 import  classes from './Layout.module.css'
<main className={classes.Content}>
    {props.children}
</main>

因此，我认为这种方法适用于最新的React版本

希望这也能对你有所帮助

- Swat

Answer 4

我的 Webpack 配置有一个拼写问题

module: {
    rules: [
         {
            test: /\.less$/,
            use: [
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
                {
                    loader: 'less-loader',
                },
            ],
        },
 .......

我使用了模块(module)而不是模块组(modules)。希望这能帮到某些人。

- Saurabh Gupta

Answer 5

如果您正在更改配置文件以加载CSS，则您的对象应该如下所示
我的React版本为6.14.11

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

- Dhruv

Answer 6

在 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模式的选项对象进行初始化。

• 选项具有未知属性“minimize”。这些属性是有效的： object { url？，import？，modules？，sourceMap？，importLoaders？，localsConvention？，onlyLocals？ }

- Shashikant Pandit