ant-design框架之自定义主题时,报错

255 阅读1分钟
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.    
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (D:\Git\Shiny-Console\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (D:\Git\Shiny-Console\node_modules\webpack\lib\NormalModule.js:578:19)
    at Object.loader (D:\Git\Shiny-Console\node_modules\postcss-loader\dist\index.js:40:24)

通过查找发现,在创建项目的时候,是4.5版本,而webpack也是4.5版本的高版本 所以说会出现上面的问题,所以我们在创建config-overrides.js文件的时候,在原来配置的基础上需要多配置一项(adjustStyleLoaders)

const { override, fixBabelImports, addLessLoader,adjustStyleLoaders} = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions:{
      javascriptEnabled: true,
      modifyVars: { '@primary-color': 'green' },
    }
  }),
  
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
 })
);

在添加完此项配置之后,再次重新启动项目就可以实现自定义主题颜色了

image.png