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

最新推荐文章于 2022-06-23 14:37:00 发布
最新推荐文章于 2022-06-23 14:37:00 发布
阅读量544 收藏 1
点赞数 4
分类专栏： web 文章标签： react localIdentName自定义生成的类名格式 css-loader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43256428/article/details/93385090
版权
在使用React开发过程中，遇到在配置CSS模块加载器css-loader时，自定义localIdentName为[path][name]-[local]-[hash:5]导致模块构建失败，报'ValidationError: CSS Loader Invalid Options'错误。通过修改规则，成功解决了类名格式报错的问题。
摘要由CSDN通过智能技术生成

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

最低0.47元/天 解锁文章
zhou粥zzz
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
postcss在import了css后后出错
kfgauss的博客
01-28 1994
慕课视频   报错： ERROR in ./src/css/common.css (./node_modules/css-loader/dist/cjs.js?importLoaders=1!./node_modules/postcss-loader/src!./src/css/common.css) Module build failed (from ./node_modules/cs...
react+antd拖拽生成自定义表单.rar
06-08
在本文中，我们将深入探讨如何使用React和Ant Design库来创建一个基于拖拽的自定义表单生成器。Ant Design是流行的React UI组件库，它提供了丰富的预设样式和组件，便于快速构建用户界面。而React作为Facebook开发的...
react中引入css的报错问题
柠檬不萌只是酸i
11-08 1649
在react项目中的index.html中引入公共的css样式， 我是这样引入的：【用的是相对路径】 <link href="./css/reset.css" rel="stylesheet" type="text/css" /> 问题描述： 但是，当我页面在使用二级路由的时候，它会根据相对的目录去找 css / reset.css 文件。 这样肯定是找不到的。 解...
react 自定义模块化类名 localIdentName
qq_36249659的博客
02-11 474
module: { rules: [ { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: [ {...
nuxt/eapress 安装报错Module build failed: ValidationError: PostCSS Loader Invalid OptionsModule build fa...
weixin_30247159的博客
03-20 323
错误信息： Module build failed: ValidationError: PostCSS Loader Invalid Options options['useConfigFile'] is an invalid additional property 解决方案[安装postcss-loader包]： npm install --D postcss-loade...
react自定义日期组件datePicker
01-13
本案例中，我们关注的是一个使用TypeScript（ts）和React的JSX语法（tsx）实现的自定义日期选择组件——`datePicker`。 `datePicker`组件通常包含以下几个主要部分： 1. **UI结构**：组件的视觉呈现，包括日历图标...
React Native自定义标题栏组件的实现方法
01-20
在React Native中，自定义组件是提升开发效率和代码复用性的重要手段。本文将详细介绍如何创建一个不带返回按钮的自定义标题栏组件。首先，我们要了解React Native的基础组件和样式系统。 基础组件`View`和`Text`在...
react-基于react的自定义滚动条组件
08-14
在React开发中，有时我们可能需要对网页的默认滚动条进行自定义，以提升用户体验或者满足特定设计需求。本文将详细讲解如何基于React创建一个自定义滚动条组件，并探讨相关的关键知识点。 首先，React是一个流行的...
React自定义输入框ui库组件.zip
04-14
在React生态系统中，开发自定义UI库组件是常见的需求，以满足特定的设计风格或功能需求。这个名为"React自定义输入框ui库组件.zip"的压缩包文件很可能包含了一个专门针对输入框（Input）组件的自定义实现，适用于...
webpack Dev Server Invalid Options options should NOT have additional properties 解决办法
热门推荐
qq_36836277的博客
03-19 4万+
出现上面问题的原因是webpack.config.js中config.devServer 配置出现了问题 const config = { ... } if(isDev) { config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true,...
gulp时webpack报错：WebpackOptionsValidationError: Invalid configuration object. Webpack has been initial
飞鸟过境的Blog
10-04 2万+
错误信息如下: E:\works\ES6&amp;gt;gulp [20:37:23] Failed to load external module @babel/register [20:37:23] Requiring external module babel-register [20:37:26] Using gulpfile E:\works\ES6\gulpfile.babel.js [20:...
Module build failed: Unknown word，无法读取css文件
前端
04-10 1万+
在写Vue程序过程中遇到错误： ERROR in ./src/assests/styles/test.css Module build failed: Unknown word (2:1) 1 | &gt; 2 | var content = require("!!./test.css"); | ^ 3 | 4 | if(typeof content === 'string...
vue 启动项目时报错 ValidationError: webpack Dev Server Invalid Options
csdn_chengpeng的博客
05-07 3万+
如果vue 启动项目时出现报错信息：ValidationError: webpack Dev Server Invalid Options 解决的方法： 找到 config.js 文件 修改一下里面的内容 找到 devServer 将里面的proxy注释掉就可以了 ...
React使用css module设置className多类名
buyue
03-21 2460
import globals from '../../public/styles/globals.module.scss' 单类名设置 <div className={globals.channelLink}>联系我们</div> 多类名设置 方式1: <div className={[`${globals.link}`,`${globals.width20}`].join(' ')}> 方式2: <div className={`${globals.link
Module build failed: Error: Failed to load plugin html: Cannot find module 'eslint-plugin-html'
信徒博客
05-09 6903
报错信息如下 解决方案
ValidationError: Progress Plugin Invalid Options options should NOT have additional properties
Cheryl的加工厂
06-23 6626
ValidationError: Progress Plugin Invalid Options options should NOT have additional properties options should NOT have additional properties options should NOT have additional properties 报错解决方案
react pdfjs-dist运行报错
最新发布
03-28
当使用react-pdfjs-dist时，如果出现运行报错，可能是由于以下原因之一： 1. 缺少依赖：请确保已经正确安装了react-pdfjs-dist的依赖项。可以通过运行`npm install react-pdfjs-dist`或`yarn add react-pdfjs-dist`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值