配置LESS文件报错：ValidationError: Invalid options object. Less Loader has been initialized using an option

最新推荐文章于 2025-08-26 21:43:38 发布
原创 最新推荐文章于 2025-08-26 21:43:38 发布 · 1.6w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs

针对新版less-loader配置问题，博主提供了回退版本至5.0.0或更新配置的解决方案，有效解决了LESS文件加载错误。

更新一下，原提供解决方法的博主回我了，说是新版less-loader的配置和5.0.0版本的配置不同，没有使用新版的配置方法而产生的问题，所以解决方法就是：回退less-loader版本或者使用新的配置方法

原博地址：https://blog.csdn.net/wang_jun8072/article/details/106160036

github地址：https://www.npmjs.com/package/less-loader

感谢博主的回答！

--------------------------------------------------------------------以下解决方法---------------------------------------------------------------------------------

按照网上的配置LESS文件的步骤进行配置之后，配置步骤

报错：

在网上查找资料发现是less-loader版本的问题，要将该版本回退到5.0.0，但是具体为什么将版本回退我还不知道是为什么

查找到的资料

 

解决方法：

删除已安装的less-loader

yarn remove less-loader

安装5.0.0版本

yarn add less-loader@5.0.0

 

之后，成功

 

Spring Boot入门教程(四):配置文件
人不风流枉少年
03-20 4839
配置方式 每个starter都有自己默认的配置，如果需要改变默认值，可以在其他地方配置来覆盖掉默认的值，覆盖默认的配置有多种方式，每种方式的优先级也不同，如果在多个地方配置则优先使用优先级高的值，其中命令行参数优先级最高, 其中大部分参数一般都配置在属性文件application.properties中，属性文件即可以覆盖starter中默认的值，也可以自定义值 在命令行行输入的参数 SPR...
Spring Boot学习总结（8）——SpringBoot Common application properties（application.properties）详解
科技D人生
05-05 4057
各种属性可以在您的application.properties/application.yml文件或命令行开关指定。下面提供了常见的Spring启动属性和引用它们的基础类的列表。 # =================================================================== # COMMON SPRING BOOT PROPERTIES # # T
ValidationError: Invalid options object. Less Loader has been initialized usin...
King的博客
08-24 8503
在react项目开发时，配置less后，运行项目报如下错误： ./node_modules/antd-mobile/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-7-3!./node_modules/less
vant4+vue3的主题修改出现的ERR
melissaomy的博客
01-28 590
vant4+vue3
运行vue项目报错 ERROR ValidationError: Progress Plugin Invalid Options options should NO......
最新发布
Solar_angel的博客
08-26 260
Vue CLI 4.x升级5.x后出现编译报错，原因是webpack版本未同步更新。解决方法是：1) 升级Vue CLI相关包(@vue/cli-service等)；2) 升级webpack核心包(webpack@5等)。若报错提示缺少pnpm，删除pnpm-lock.yaml文件即可。该问题主要由于版本不兼容导致，通过更新相关依赖包可解决。
Vue.config.js 配置报错 ValidationError: Invalid options object.
热门推荐
c327127960的博客
01-30 2万+
Vue.config.js 配置报错 ValidationError: Invalid options object.
ValidationError: Invalid options object. Less Loader has been initialized using an options object...
qq_44890362的博客
01-18 3210
1.大家在react中配置了less可能会出现下图的错误，这是因为less版本太高了，我们需要降一下版本。 2.我们可以去package.json文件中去修改下less-loader的版本 3.然后执行下yarn命令就可以了 yarn ...
ValidationError: Invalid options object. Less Loader has been initialized using an options object
Gmaomua的博客
07-31 3102
配置less-loader 第一次在项目中引入ant-design组件库，需要配置less语言。 在yarn add less-loader后提示 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? Error in E:\dataStru\antd-demo\node_modules\ant-design-vue\es\style\color\bezierEasing.less
报错Invalid options object. Style Loader has been initialised using an options object that does not .
spicyboiledfish的博客
08-19 5002
先贴出报错： 我用的webpack版本是：v4.36.1 根据字面意思，style-loader中不存在上述的options选项。找到node_modules里面的style-loadr源码查看： const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === ...
ERROR in ./src/styles/app.less (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-34.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-34.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-34.use[3]!./node_modules/windicss-webpack-plugin/dist/loaders/windicss-css.cjs!./src/styles/app.less) Module build failed (from ./node_modules/less-loader/dist/cjs.js): ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'globalVars'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation?, lessLogAsWarnOrErr? } at validate (D:\financial-ui\financial-ui\node_modules\webpack\node_modules\schema-utils\dist\validate.js:163:11) at Object.getOptions (D:\financial-ui\financial-ui\node_modules\webpack\lib\NormalModule.js:685:19) at Object.lessLoader (D:\financial-ui\financial-ui\node_modules\less-loader\dist\index.js:12:24) @ ./src/styles/app.less 4:14-316 15:3-20:5 16:22-324 @ ./src/main.js 27:0-27 webpack compiled with 57 errors
03-25
修改 `webpack.config.js` 或相关配置文件中的 less-loader 配置： ```javascript // 错误配置 ❌ { loader: 'less-loader', options: { globalVars: { '@primary-color': '#1890ff' }, // 非法属性 sourceMap:...
springboot配置文件application.properties中的配置项
SteveJobson
12-19 3398
# BANNER banner.charset=UTF-8 # Banner file encoding. banner.location=classpath:banner.txt # Banner file location. banner.image.location=classpath:banner.gif # Banner image file location (jpg/p
object { lessOptions?, prependData?, appendData?, sourceMap? }
weixin_43848130的博客
04-29 2627
Markdown
ValidationError: Invalid options object. Less Loader has been initialized using an options object th
Dong__Ni的博客
09-07 1382
./node_modules/_antd@4.6.2@antd/es/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-7-3!./node_modules/_less-loader@7.0.1@less-loader/dist/c
antd自定义主题，报错：ValidationError: Invalid options object. Less Loader has been initialized usin...
weixin_44606225的博客
07-21 1271
实现组件的按需打包 下载依赖模块 npm install react-app-rewired customize-cra babel-plugin-import --save-dev 定义加载配置的 js 模块: config-overrides.js const {override, fixBabelImports} = require('customize-cra'); module.exports = override( fixBabelImports('import', { ..
依赖包报错Invalid options object. Less Loader has been initialized using an options object that does not
i_am_a_div的博客
09-07 4490
1.问题：yarn安装依赖包，启动项目报错 error in ./node_modules/ant-design-vue/dist/antd.less Module build failed: ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. 2.原因：这是因为less-loader的版本
Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an opt
qq_33240556的博客
04-12 3188
要解决这个问题，请根据提供的有效属性来调整您的配置。例如，如果您原本想通过"data"属性传递额外的数据给Sass编译器，那么应该使用"additionalData"属性。这个错误提示指出，在配置Sass Loader时，您提供了一个包含无效属性"data"的选项对象。Sass Loader期望的配置选项中并没有名为"data"的属性。Sass Loader 使用了一个不符合API模式的选项对象初始化。请对照有效的配置属性清单，检查并修改您的Sass Loader配置，移除或替换无效的"data"属性。
Invalid options object. Less Loader has been initialized using an options object that does not ma...
qq_44869043的博客
06-04 1321
解决方法： 1.把less-loader 降到 5.0.0 版本。 addLessLoader({ javascriptEnabled: true, modifyVars: {'@primary-color': '#58BC58'} }) 2. 如果 less-loader 版本为 6.0.0 以上： addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: {'@primary-color': '#58BC5.
Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that
01-22
### 解析 PostCSS Loader 配置无效选项对象导致的验证错误 当遇到 `ValidationError: Invalid options object` 错误时，通常是因为传递给 PostCSS Loader 的配置项不符合其预期的 API 模式。具体来说，在较新的版本中，PostCSS Loader 对象只接受特定属性作为有效配置。 #### 修改 Webpack 配置中的 PostCSS 加载器设置 对于 webpack 中使用的 PostCSS loader, 如果在 `module.rules` 或其他地方定义了 PostCSS loader 并指定了 `options`, 应该移除不再支持的字段并仅保留官方文档所列的有效字段[^2]。 ```javascript // webpack.config.js 示例调整后的配置 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { // 使用此键来指定 PostCSS 插件和其他选项 plugins: () => [require('autoprefixer')] } } } ] } ``` #### 创建独立的 PostCSS 配置文件 另一种推荐的方法是在项目根目录下创建单独的 `postcss.config.js` 文件用于管理 PostCSS 设置，而不是直接把它们放在 Webpack 配置里。这有助于保持构建工具链各部分之间的分离，并简化维护工作[^4]。 ```javascript // postcss.config.js 示例 module.exports = { plugins: [ require('autoprefixer') ] }; ``` 接着可以在 Webpack 配置中省略对 PostCSS loader 的内联选项声明： ```javascript // 更新后的 webpack.config.js 片段 use: ['style-loader', 'css-loader', 'postcss-loader'] ``` 通过上述更改可以解决由于不兼容或过期的配置参数引起的 `Invalid options object` 错误消息。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值