javascript 验证错误:无效的选项对象,CSS加载器已使用与API架构不匹配的选项对象初始化

djmepvbi  于 2022-12-21  发布在  Java
关注(0)|答案(6)|浏览(133)

我正在使用@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"
  }
}
mpbci0fu

mpbci0fu1#

我遇到了同样的问题后,升级css加载程序,但我解决了它。
如果你查看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
    }
}
xmakbtuz

xmakbtuz2#

要临时修复您的问题,请从这些软件包中删除“^”符号:

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

它看起来像是这些软件包的一个有缺陷的更新版本。

uelo1irk

uelo1irk3#

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进行了评论,它起作用了。

  • //本地标识名称:"[名称][本地][哈希:base64:5]"*

评论它可能是错误的,但我仍需要对此进行更多的调查。
如果我把它加起来,得到:-
验证错误:无效的选项对象。CSS加载器已使用与API架构不匹配的选项对象初始化。

  • 选项具有未知属性"minimize"。这些属性有效:对象{url?,导入?,模块?,源Map?,导入加载器?,本地约定?,仅本地?}
dy2hfwbg

dy2hfwbg4#

如果你在配置文件中为加载css做修改。那么你的对象应该如下所示

  • 我的React版本是2011年6月14日 *
{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
            modules : {
              localIdentName: '[name]__[local]__[hash:base64:5]',
            },
          }),
wrrgggsh

wrrgggsh5#

我的Web包配置有拼写问题

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

我用模块而不是模块。希望这对某人有帮助。

zazmityj

zazmityj6#

我遇到了同样的问题,***“验证错误:无效的选项对象。CSS加载器已使用与API架构不匹配的选项对象进行初始化。'***我尝试了所有解决方案,但这些解决方案对我无效,我删除了所有这两行:

module:true

本地标识名:'[名称][本地][哈希:基本64:5]',
我创建了名为layout.module.css的布局css文件,在js文件中,我像这样导入它,并像下面这样使用

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

所以我认为这个方法适合最新的react版本
希望这对你也有帮助

相关问题