antd-mobile定制主题，报错：ValidationError: Invalid options object. Less Loader has been initialized usin...

最近在做项目的时候，使用antd-mobile定制主题，却报了./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-loader/dist/cjs.js??ref--6-oneOf-7-4!./node_modules/antd-mobile/es/button/style/index.less)
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 'modifyVars'. These properties are valid:
  object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

  
  
  

  image.png
  
  

  config-overrides.js的文件如下：

const { override, fixBabelImports , addLessLoader} = require("customize-cra");
const theme = require('./antd-theme');
module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme
   
  }),
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    libraryDirectory: 'es',
    style: true,
  }),
);

刚开始的时候也查了好久，因为以前同样的配置并没有这样的错误，后来才猛然发现原来是less-loader的版本的原因，现在用的是"less-loader": "^6.1.0", 之前用的好像是5.6版本的。在less-loader版本中配置的参数具体可查https://www.npmjs.com/package/less-loader#lessoptions

其实从最后的报错信息就能看出来，options的属性值有五种：

image.png

果真还得仔细看报错信息啊，哈哈

修改如下：

const { override, fixBabelImports , addLessLoader} = require("customize-cra");
const theme = require('./antd-theme');
module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme
   }
  }),
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    libraryDirectory: 'es',
    style: true,
  }),
);

问题得以解决