React 自定义生成类名格式报错问题

最新推荐文章于 2024-11-08 19:00:00 发布

原创最新推荐文章于 2024-11-08 19:00:00 发布 · 625 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #localIdentName自定义生成的类名格式 #css-loader

web 专栏收录该内容

3 篇文章

订阅专栏

在使用React开发过程中，遇到在配置CSS模块加载器css-loader时，自定义localIdentName为[path][name]-[local]-[hash:5]导致模块构建失败，报'ValidationError: CSS Loader Invalid Options'错误。通过修改规则，成功解决了类名格式报错的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{ test: /.css$/, use: [‘style-loader’, ‘css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]’] }
会报错
ERROR in ./src/css/cmtlist.css (./node_modules/_css-loader@3.0.0@css-loader/dist/cjs.js?modules&localIdentName="[path]"!./src/css/cmtlist.css)
Module build failed (from ./node_modules/_css-loader@3.0.0@css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

at validateOptions (D:\WEB前端\就业班\04-JavaScript高级\React\re-day02\node_modules\_schema-utils@1.0.0@schema-utils\src\validateOptions.js:32:11)
at Object.loader (D:\WEB前端\就业班\04-JavaScript高级\React\re-day02\node_modules\_css-loader@3.0.0@css-loader\dist\index.js:34:28)

@ ./src/css/cmtlist.css 2:14-134 21:1-42:3 22:19-139
@ ./src/components/CmtList2.jsx
@ ./src/index.js

ERROR in ./src/css/cmtitem.css (./node_modules/_css-loader@3.0.0@css-loader/dist/cjs.js?modules&localIdentName="[path]"!./src/css/cmtitem.css)
Module build failed (from ./node_modules/_css-loader@3.0.0@css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

at validateOptions (D:\WEB前端\就业班\04-JavaScript高级\React\re-day02\node_modules\_schema-utils@1.0.0@schema-utils\src\validateOptions.js:32:11)
at Object.loader (D:\WEB前端\就业班\04-JavaScript高级\React\re-day02\node_modules\_css-loader@3.0.0@css-loader\dist\index.js:34:28)

@ ./src/css/cmtitem.css 2:14-134 21:1-42:3 22:19-139
@ ./src/components/CmtItem2.jsx
@ ./src/components/CmtList2.jsx
@ ./src/index.js

规则改为以下就好了

  {
    test: /\.css$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
               },
        }
      }
    ]
  },