如果是自己配置的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. git 使用方式

    一.常用操作命令 1.初始化操作 git config --global user.name '<name>' # 设置提交者名称 git config --global user.ema ...

  2. 想在网上保持匿名?教你用Linux如何实现!

    想在网上保持匿名?教你用Linux如何实现! 信息时代给我们的生活带来极大便利和好处的同时也带来了很大的风险.一方面,人们只要点击几下按钮,就能基本上访问已知存在的全部信息和知识:另一方面,要是这种权 ...

  3. 分享基于Qt5开发的一款故障波形模拟软件

    背景介绍 这是一款采用Qt5编写的用于生成故障模拟波形的软件.生成的波形数据用于下发到终端机器生成对应的故障类型,用于培训相关设备维护人员的故障排查技能.因此,在这款软件中实现了故障方案管理.故障波形 ...

  4. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  5. C语言博客作业--字符数组

    一.PTA实验作业 题目1:统计一行文本的单词个数 1. 本题PTA提交列表 2. 设计思路 Begin 定义字符型变量ch,pre=' ': 定义整型变量count://用来记录单词个数 count ...

  6. Software Engineering-HW3 264&249

    title: Software Engineering-HW3 date: 2017-10-05 10:04:08 tags: HW --- 小组成员 264 李世钰 249 王成科 项目地址 htt ...

  7. 用greenlet实现Python中的并发

    from greenlet import greenlet def test1(): print 12 gr2.switch() print 34 def test2(): print 56 gr1. ...

  8. 实验二Java面向对象程序设计实验报告(2)

    实验二 Java面向对象程序设计 实验概述: 课程:程序设计与数据结构 班级:1623班 姓名: 邢天岳 学号:2309 指导老师:娄老师 王老师 实验日期:2017.4.16 实验名称: Java面 ...

  9. jquery基本使用和实例

    一.寻找元素 表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") / ...

  10. JDBC操作数据库的三种方式比较

    JDBC(java Database Connectivity)java数据库连接,是一种用于执行上sql语句的javaAPI,可以为多种关系型数据库提供统一访问接口.我们项目中经常用到的MySQL. ...