如果是自己配置的reac项目,而非官方推荐的creat-react-app或者dva-cli等阿里自己开发的脚手架去引入antd,会有两个问题

第一,用babel-plugin-import设置style true 并不能通过less的方法引入antd 的样式。只能自动引入css。需要手动去引入less文件导入样式。

第二,既然无法自动按需引入less文件也就无法去改主题色,即使手动引入全局的antd,去改 primary-color 也不能生效。

   即使在loader 添加options{"modifyVars":{ "@primary-color": "#1DA57A"}},用less 的modifyVars 去修改,依然无法对antd生效。

解决方案:1.使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)并修改 启动配置。

     2.引入 react-app-rewire 的 less 插件 react-app-rewire-less 来帮助加载 less 样式

另外有其他的解决方案,可以在antd-init 中修改

antd 主题色的更多相关文章

  1. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  2. 在webpack自定义配置antd的按需加载和修改主题色

    最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...

  3. react+antd 使用脚手架动态修改主题色

    最近做了一个需求,后台管理系统添加一个可以动态修改ant-design主题色.查询了大多数的文章,发现基本都是抄来抄去,而且文章记录的也一点也不详细.刚刚把这个功能做完了,顺便记录一下如何去修改主题色 ...

  4. Swift主题色顶级解决方案

    一.常规主题色使用点 应用在发布前都会对主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1. TabBar部分,设置图片高亮.文本高度颜色2. Navigatio ...

  5. Swift主题色顶级解决方案一

    一.常规主题色使用点 应用在发布前都会对其主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1.TabBar部分,设置图片高亮.文本高度颜色 2.Navigatio ...

  6. element-ui更换主题色

    1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...

  7. element ui主题色跟换

    node_modules\ element ui\ lib\ theme-dafault  下载的主题色替换掉改文件... ================== 但是会出现  搜索框iocon 样式换 ...

  8. WP8.1 中获取背景色和主题色

    背景色: Application.Current.RequestedTheme 返回的值是一个枚举,Light 或者 Dark. 主题色: public static Color GetPhoneAc ...

  9. MahApps.Metro扁平化UI控件库(可修改主题色等)

    一.名词解释 使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...

随机推荐

  1. ELK重难点总结和整体优化配置

    本文收录在Linux运维企业架构实战系列 做了几周的测试,踩了无数的坑,总结一下,全是干货,给大家分享~ 一.elk 实用知识点总结 1.编码转换问题(主要就是中文乱码) (1)input 中的cod ...

  2. Spring事务传播机制和数据库隔离级别

    Spring事务传播机制和数据库隔离级别 转载 2010年06月26日 10:52:00 标签: spring / 数据库 / exception / token / transactions / s ...

  3. python函数名称空间

    一.命名空间概念 命名空间(name space),若变量x=1,1存放在内存中,命名空间是存放名字x.x与1绑定关系的地方.命名空间分三种: locals:函数内的名称空间,包括局部变量和形参 gl ...

  4. nginx+lua 根据指定路径反向代理

    location /imgproxytest{ if ($uri ~ ".*\.(jpg|png|jpeg|bmp|gif|swf|css)$"){ rewrite_by_lua ...

  5. 【Python】 用户图形界面GUI wxpython I 基本用法和组件

    wxpython - 基本用法和组件 wxpython是python对跨平台GUI库wxWidgets的封装.wxWidgets是由C++写成的. wxpython被包装进了wx模块中,用它设计GUI ...

  6. Orcle查询优化改写-----单表查询

    1.将空值转化为实际值 coalesce  返回第一个不是null的参数 2.查询满足多个条件的行 需要注意,对于多个条件组合,要使用括号,这样在更改维护语句时可以不吸烟再考虑优先级问题,而且可以很容 ...

  7. java中最常用jar包的用途说明

    java中最常用jar包的用途说明,适合初学者 jar包 用途 axis.jar SOAP引擎包 commons-discovery-0.2.jar 用来发现.查找和实现可插入式接口,提供一些一般类实 ...

  8. 涉及模式之 装饰器模式详解(与IO不解的情缘)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. LZ到目前已经写了九个设计模 ...

  9. 在使用Qt5.8完成程序动态语言切换时遇到的问题

    因为之前了解过一些Qt国际化的东西,所以在写程序的时候需要显示给用户的字符都使用了 tr(" ")的形式,然后使用 Qt Linguist得到相应的 qm(Qt message)文 ...

  10. 巨人大哥谈Java中的Synchronized关键字用法

    巨人大哥谈Java中的Synchronized关键字用法 认识synchronized 对于写多线程程序的人来说,经常碰到的就是并发问题,对于容易出现并发问题的地方价格synchronized基本上就 ...