React项目antd-mobile定制主题

在项目根目录：

cnpm install --save-dev babel-plugin-import less less-loader@5.0.0 style-loader css-loader

 

打开项目根目录的config-overrides.js，

把

const { override, fixBabelImports, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  fixBabelImports(
    'import', 
    {
      libraryName: 'antd-mobile',
      libraryDirectory: "es",
      style: 'css'
    } //antd按需加载
  ),
  addDecoratorsLegacy() //配置装饰器
);

改为

const { override, addLessLoader, fixBabelImports, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@brand-primary': 'rgba(17, 211, 198, 1)',
      '@brand-primary-tap': 'rgba(17, 111, 98, 1)'
     }
  }), //antd定制主题
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true
  }), //antd按需加载
  addDecoratorsLegacy() //配置装饰器
);

 

 

主题样式参考：

https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less