方案一: npm run eject 暴露所有内建的配置

安装组件库

yarn add antd babel-plugin-import

根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入:

{
"extraBabelPlugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}]
]
}

antd配置

修改 webpack.config.dev.js 和 webpack.config.prod.js文件,这里以webpack.config.dev.js举例,

webpack.config.prod.js一样配置即可:

// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// 改动: 添加 antd 按需加载文件处理插件
plugins: [
['react-html-attrs'],//添加babel-plugin-react-html-attrs组件的插件配置
// 引入样式为 css
['import', { libraryName: 'antd', style: 'css' }],
// 改动: 引入样式为 less
// ['import', { libraryName: 'antd', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},

引入模块如下:

  // scr/App.js
import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
import './App.css';

方案二:React-app-rewired(一个对 create-react-app 进行自定义配置的社区解决方案)

1. 安装react-app-rewired

npm install –save-dev react-app-rewired

2.修改package.json启动项

/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}

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

module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};

4.使用babel-plugin-import实现Antd按需加载,修改config-overrides.js

npm install –save-dev babel-plugin-import

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config);
return config;
};

5.使用react-app-rewire-less配置Less

npm install –save-dev react-app-rewire-less

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less'); module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
config = rewireLess.withLoaderOptions({
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
return config;
};

我遇到的问题: 1. \__DEV__ is not defined.

npm install –save-dev react-app-rewire-defind-plugin

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireDefinePlugin = require('react-app-rewire-define-plugin'); module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
config = rewireLess.withLoaderOptions({
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
config = rewireDefinePlugin(config, env, {
__DEV__: false
});
return config;
};

注:在执行 yarn build 进行打包部署后,antd样式没有加载进去

解决方案:生产部署增加对antd的支持

// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// 改动: 添加 antd 按需加载文件处理插件
plugins: [
['react-html-attrs'],//添加babel-plugin-react-html-attrs组件的插件配置
// 引入样式为 css
['import', { libraryName: 'antd', style: 'css' }],
// 改动4: 引入样式为 less
// ['import', { libraryName: 'antd', style: true }],
],
compact: true,
},
},

create-react-app 引入 antd 及 解决 antd 样式无法显示的bug的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

随机推荐

  1. 迅为7寸Android嵌入式安卓触摸屏,工业一体机方案

    嵌入式安卓触摸屏板卡介绍-工业级核心板: 嵌入式安卓触摸屏功能接口介绍: 品质保障: 核心板连接器:进口连接器,牢固耐用,国产连接器无法比拟(为保证用户自行设计的产品品质,购买核心板用户可免费赠送底板 ...

  2. golang zip 解压、压缩文件

    package utils import (    "archive/zip"    "fmt"    "io"    "io/i ...

  3. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. 谷歌全屏脚本 start chrome.exe --kiosk http://www.baidu.com

    start chrome.exe --kiosk http://www.baidu.com

  5. bat2exe 就是这么简单 白研究半天VC++了

    bat2exe 就是这么简单 白研究半天VC++了 结果:bat2exe编译的执行文件会被杀毒软件查杀.

  6. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  7. CAD参数绘制角度标注(com接口)

    主要用到函数说明: _DMxDrawX::DrawDimAngular 绘制一个角度标注.详细说明如下: 参数 说明 DOUBLE dAngleVertexX 角度标注的顶点的X值 DOUBLE dA ...

  8. Python3中assert断言

    一般的用法是: assert condition 用来让程序测试这个condition,如果condition为false,那么raise一个AssertionError.逻辑上等于: if not ...

  9. C++如何显式调用常成员函数

    C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...

  10. 笔试算法题(34):从数字序列中寻找仅出现一次的数字 & 最大公约数(GCD)问题

    出题:给定一个数字序列,其中每个数字最多出现两次,只有一个数字仅出现了一次,如何快速找出其中仅出现了一次的数字: 分析: 由于知道一个数字异或操作它本身(X^X=0)都为0,而任何数字异或操作0都为它 ...