Antd环境配置

1.安装antd
  npm install -S antd

2.修改代码

修改 src/App.js

import React, { Component } from 'react';

import Button from 'antd/lib/button'; import './App.css';

class App extends Component {

       render() {

              return (

                    <div className="App">

                           <Button type="primary">Button</Button>

                      </div> );

               }

}

export default App;

修改 src/App.css

@import '~antd/dist/antd.css';

.App { text-align: center; } ...

3.按需加载
  目前并非按需加载，所有的css样式都全部一次性加载

4.安装依赖
  npm install -D react-app-rewired

 

/* package.json */

"scripts": {

- "start": "react-scripts start",

+ "start": "react-app-rewired start",

- "build": "react-scripts build",

+ "build": "react-app-rewired build",

- "test": "react-scripts test",

+ "test": "react-app-rewired test",

}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置

module.exports = function override(config, env) {

     // do stuff with the webpack config...

    return config;

};

 

 npm install -D babel-plugin-import

config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
  };
 

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css';

 

// src/App.js

import React, { Component } from 'react';

- import Button from 'antd/lib/button';

+ import { Button } from 'antd'; import './App.css';

class App extends Component {

     render() {

         return (

              <div className="App">

                    <Button type="primary">Button</Button>

             </div> );

    }

}

export default App;