首页 > 其他分享> 文章详细

Ant Design Dynamic Runtime Theme

2021-03-29 11:03:40 阅读：331 来源： 互联网

标签：__ const less Dynamic Ant Theme path antd config

根据现有需求，需要在运行时更新antd的主题色

项目架构：Create-react-app + antd

由于现有的编译命令，不能使用react-app-rewired命令，只能使用node

1. 安装插件

npm install antd-theme-generator antd-theme-webpack-plugin less less-loader react-app-rewire-less react-app-rewired -s

2. 根目录创建color.js, 内容如下

const path = require('path');
const { generateTheme } = require('antd-theme-generator');

const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/vars.less'),
  mainLessFile: path.join(__dirname, './src/styles/main.less'),
  themeVariables: [
    '@primary-color'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'),
  customColorRegexArray: [/^fade\(.*\)$/]
}

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
  .catch(error => {
    console.log('Error', error);
  });

3. 根目录创建config-overrides.js

const path = require('path');
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const { getLessVars } = require('antd-theme-generator');
/*
# Config
*/
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', style: true }],
    config
  );
  config = rewireLess.withLoaderOptions({
    modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')),
    javascriptEnabled: true
  })(config, env);
  return config;
};

4. index.html引入less.min.js

<link rel="stylesheet/less" type="text/css" href="./color.less" />
    <script>
        window.less = {
            async: true,
            env: 'production'
        }
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

5. main.less

@import "vars.less";
@import "./index.less";

6. var.less

@import "~antd/lib/style/themes/default.less";

7. index.less

// 这里一定是css，不能是less， less的话会把生成的自定义样式覆盖掉！！！！
@import '~antd/dist/antd.css';

8. 执行脚本

"scripts": {
    "start": "node script/start.js",
    "color": "node color.js",
    "m_start": "run-p color start"
}

标签：__,const,less,Dynamic,Ant,Theme,path,antd,config
来源： https://blog.csdn.net/licuifeng/article/details/114980018

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ant Design Dynamic Runtime Theme