package.json配置：

{
  "name": "hawerblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.15.0",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "react": "^16.8.4",
    "react-app-rewire-define-plugin": "^1.0.0",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.1",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.4.0",
    "react-scripts": "2.1.8",
    "webpack-merge": "^4.2.1"
  },
  "scripts": {
    "start": "set PORT=4000 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

想实现的目标效果：

import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Button } from 'antd'

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import './styles/main.less'

import routes from './routers'

import Banner from './components/banner'

class App extends Component {
  render () {
    return (
      <div className='App'>
        <Button type='primary'>
          Primary
        </Button>
        <Banner/>
        <Router>
          <header className='title'>
            {routes.map((r, key) => {
               if (r.text) {
                 return <Link key={key} to={r.path}>
                        {r.text}
                        </Link>
               }
             })}
          </header>
          {routes.map((route, key) => {
             if (route.exact) {
               return <Route
                        key={key}
                        exact
                        path={route.path}
                        render={props => (
                                  <route.component {...props} routes={route.routes} />
                                )} />
             }else {
               return <Route key={key} path={route.path} render={props => (
                                                        <route.component {...props} routes={route.routes} />
                                                      )} />
             }
           })}
        </Router>
      </div>
    )
  }
}

export default App

直接引入下面这句，样式就有了，不需要全局引入完整的antd样式，查阅资料我选用的是react-app-rewired方案

import { Button } from 'antd'

config-overrides.js 配置如下

const {
  override,
  fixBabelImports,
  addLessLoader,
  addBabelPlugin
} = require('customize-cra')
const path = require('path')
const merge = require('webpack-merge')

const rewireLess = require('react-app-rewire-less')
const rewireDefinePlugin = require('react-app-rewire-define-plugin')

override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' }
  })
)

module.exports = function override(config, env) {
  config.resolve = {
    ...config.resolve,
    alias: { '@': path.resolve(__dirname, 'src') }
  }
  config.module.rules.push({ test: /\.less$/ }, { test: /\.css$/ })
  return config
}

现在是不知道怎么样才能排除对应css/less 的node_modules引用

各位朋友走过路过给个思路谢谢！