create-react-app 引入 antd 及 解决 antd 样式无法显示的bug
方案一: 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的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [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 ...
- [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 ...
随机推荐
- 迅为7寸Android嵌入式安卓触摸屏,工业一体机方案
嵌入式安卓触摸屏板卡介绍-工业级核心板: 嵌入式安卓触摸屏功能接口介绍: 品质保障: 核心板连接器:进口连接器,牢固耐用,国产连接器无法比拟(为保证用户自行设计的产品品质,购买核心板用户可免费赠送底板 ...
- golang zip 解压、压缩文件
package utils import ( "archive/zip" "fmt" "io" "io/i ...
- jQuery 收缩展开效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 谷歌全屏脚本 start chrome.exe --kiosk http://www.baidu.com
start chrome.exe --kiosk http://www.baidu.com
- bat2exe 就是这么简单 白研究半天VC++了
bat2exe 就是这么简单 白研究半天VC++了 结果:bat2exe编译的执行文件会被杀毒软件查杀.
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- CAD参数绘制角度标注(com接口)
主要用到函数说明: _DMxDrawX::DrawDimAngular 绘制一个角度标注.详细说明如下: 参数 说明 DOUBLE dAngleVertexX 角度标注的顶点的X值 DOUBLE dA ...
- Python3中assert断言
一般的用法是: assert condition 用来让程序测试这个condition,如果condition为false,那么raise一个AssertionError.逻辑上等于: if not ...
- C++如何显式调用常成员函数
C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...
- 笔试算法题(34):从数字序列中寻找仅出现一次的数字 & 最大公约数(GCD)问题
出题:给定一个数字序列,其中每个数字最多出现两次,只有一个数字仅出现了一次,如何快速找出其中仅出现了一次的数字: 分析: 由于知道一个数字异或操作它本身(X^X=0)都为0,而任何数字异或操作0都为它 ...