項(xiàng)目地址

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

問題概況描述

根據(jù)官方教程使用dva new腳手架搭建的項(xiàng)目
修改.roadhogrc的屬性theme的primary-color后未產(chǎn)生效果
使用antd的Button
下載官方的custom-theme-sample可以生效

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

詳細(xì)創(chuàng)建過程

我使用了ant design 官網(wǎng)中的dva腳手架 構(gòu)建了工程

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中添加了一個(gè)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 >Getting Started</a></li>
      </ul>
      <Button type='primary'>測(cè)試</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":"./"
    }
  }
}

但是當(dāng)我使用npm start 開啟頁面后,發(fā)現(xiàn)主題顏色沒有修改
還是默認(rèn)的那個(gè)藍(lán)色 也就是#1890ff

請(qǐng)問,我是有哪里配置的不正確嗎

下面是我的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"
  }
}

補(bǔ)充:theme引用js文件的方案我也試過,沒有用

也試過npm run build 打包后查看,顏色也無變化,請(qǐng)問是我這種設(shè)置方式有問題還是什么原因,求給出解決方案