ant design 主题颜色无法修改的问题

Question

项目地址

https://github.com/CaiJingLong/react-dva-antd

问题概况描述

根据官方教程使用dva new脚手架搭建的项目
修改.roadhogrc的属性theme的primary-color后未产生效果
使用antd的Button
下载官方的custom-theme-sample可以生效

https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

详细创建过程

我使用了ant design 官网中的dva脚手架 构建了工程

npm install dva-cli -g
dva new test
cd test
npm install antd babel-plugin-import --save

修改了.roadhogrc文件

 "extraBabelPlugins": [
-    "transform-runtime"
+    "transform-runtime",
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ],

在indexPage.js中添加了一个antd的 Button

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import {Button} from 'antd';

function IndexPage() {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
      </ul>
      <Button type='primary'>测试</Button>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

接着按照文档中的说法,修改了.roadhogrc 全文件如下

{
  "entry": "src/index.js",
  "theme": {
    "primary-color": "#1DA57A"
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
      ],
      "publicPath":"./"
    }
  }
}

但是当我使用npm start 开启页面后,发现主题颜色没有修改
还是默认的那个蓝色 也就是#1890ff

请问,我是有哪里配置的不正确吗

下面是我的package.json

{
  "private": true,
  "scripts": {
    "start": "roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
  },
  "engines": {
    "install-node": "6.11.1"
  },
  "dependencies": {
    "antd": "^3.1.0",
    "babel-plugin-import": "^1.6.3",
    "babel-runtime": "^6.9.2",
    "dva": "^2.1.0",
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.1.1",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "expect": "^1.20.2",
    "husky": "^0.12.0",
    "redbox-react": "^1.4.3",
    "roadhog": "^1.2.1"
  }
}

补充:theme引用js文件的方案我也试过,没有用

也试过npm run build 打包后查看,颜色也无变化,请问是我这种设置方式有问题还是什么原因,求给出解决方案

Answer 1

https://ant.design/docs/react...

看文档。

Answer 2

{
  "entry": "src/index.js",
  "disableCSSModules": false,
  "publicPath": "/",
  "theme": {
    "@primary-color": "#000",
    "@link-color": "#000",
    "@border-radius-base": "2px",
    "@font-size-base": "16px",
    "@line-height-base": "1.2"
  },
  "autoprefixer": null,
  "extraBabelPlugins": [
      "transform-runtime",
      ["import", { "libraryName": "antd","style": true }]
  ],
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime"
      ]
    }
  }
}

Answer 3

可以修改的~ https://ant.design/docs/react... 官方文档