使用antd按需加载
使用react-app-rewired对 create-react-app 的默认配置进行自定义
1、yarn add react-app-rewired --dev
/* package.json */
\" s\": {
- \"start\": \"react- s start\",
+ \"start\": \"react-app-rewired start\",
- \"build\": \"react- s build\",
+ \"build\": \"react-app-rewired build\",
- \"test\": \"react- s test --env=jsdom\",
+ \"test\": \"react-app-rewired test --env=jsdom\",
}
2.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式babel 插件（原理），现在我们尝试安装它并修改config-overrides.js 文件
1.yarn add babel-plugin-import --dev
+ const { injectBabelPlugin } = require(\'react-app-rewired\');
module.exports = function override(config, env) {
+ config = injectBabelPlugin([\'import\', { libraryName: \'antd\', libraryDirectory: \'es\', style: \'css\' }], config);
return config;
};
或者也可修改
{
test: /\\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve(\'babel-loader\'),
options: {
plugins: [
[\'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,
},
},
自定义主题
yarn add react-app-rewire-less --dev
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: \'css\' }], config);
+ config = injectBabelPlugin([\'import\', { libraryName: \'antd\', style: true }], config);
+ config = rewireLess.withLoaderOptions({
+ modifyVars: { \"@primary-color\": \"#1DA57A\" },
+ })(config, env);
return config;
};
参考链接：https://ant.design/docs/react/use-with-create-react-app-cn
使用less
如果已经配置react-app-rewire-less，则无需再进行此操作
1.npm install less-loader less --save-dev
2.修改node_modules/react_ /config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件
- test: /.css$/ 改为 /.(css|less)$/
- test: /.css$/ 的 use 数组配置增加 less-loader
{
test: /\\.(css|less)$/,
use: [
require.resolve(\'style-loader\'),
{
loader: require.resolve(\'css-loader\'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve(\'postcss-loader\'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: \'postcss\',
plugins: () => [
require(\'postcss-flexbugs-fixes\'),
autoprefixer({
browsers: [
\'>1%\',
\'last 4 versions\',
\'Firefox ESR\',
\'not ie < 9\', // React doesn\'t support IE8 anyway
],
flexbox: \'no-2009\',
}),
],
},
},
{
loader: require.resolve(\'less-loader\') // compiles Less to CSS
}
],
},
使用css Module
antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。
使用 exclude 和 include 配置,修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件，在与antd一起使用时可能出现错误，单独写一条规则)
{
test: /\\.css$/,
exclude: /node_modules|antd\\.css/,
use: [
require.resolve(\'style-loader\'),
{
loader: require.resolve(\'css-loader\'),
options: {
importLoaders: 1,
modules: true, // 新增对css modules的支持
localIdentName: \'[name]__[local]__[hash: 64:5]\',
},
},
{
loader: require.resolve(\'postcss-loader\'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: \'postcss\',
plugins: () => [
require(\'postcss-flexbugs-fixes\'),
autoprefixer({
browsers: [
\'>1%\',
\'last 4 versions\',
\'Firefox ESR\',
\'not ie < 9\', // React doesn\'t support IE8 anyway
],
flexbox: \'no-2009\',
}),
],
},
},
],
},
{
test: /\\.less$/,
exclude: /node_modules|antd\\.less/,
use: [
require.resolve(\'style-loader\'),
{
loader: require.resolve(\'css-loader\'),
options: {
importLoaders: 1,
modules: true, // 新增对css modules的支持
localIdentName: \'[name]__[local]__[hash: 64:5]\',
},
},
{
loader: require.resolve(\'postcss-loader\'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: \'postcss\',
plugins: () => [
require(\'postcss-flexbugs-fixes\'),
autoprefixer({
browsers: [
\'>1%\',
\'last 4 versions\',
\'Firefox ESR\',
\'not ie < 9\', // React doesn\'t support IE8 anyway
],
flexbox: \'no-2009\',
}),
],
},
},
{
loader: require.resolve(\'less-loader\') // compiles Less to CSS
},
],
},
{
test: /\\.(css)$/,
include: /node_modules|antd\\.css/,
use: [
require.resolve(\'style-loader\'),
{
loader: require.resolve(\'css-loader\'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve(\'postcss-loader\'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: \'postcss\',
plugins: () => [
require(\'postcss-flexbugs-fixes\'),
autoprefixer({
browsers: [
\'>1%\',
\'last 4 versions\',
\'Firefox ESR\',
\'not ie < 9\', // React doesn\'t support IE8 anyway
],
flexbox: \'no-2009\',
}),
],
},
},
],
},
{
test: /\\.(less)$/,
include: /node_modules|antd\\.less/,
use: [
require.resolve(\'style-loader\'),
{
loader: require.resolve(\'css-loader\'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve(\'postcss-loader\'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: \'postcss\',
plugins: () => [
require(\'postcss-flexbugs-fixes\'),
autoprefixer({
browsers: [
\'>1%\',
\'last 4 versions\',
\'Firefox ESR\',
\'not ie < 9\', // React doesn\'t support IE8 anyway
],
flexbox: \'no-2009\',
}),
],
},
},
{
loader: require.resolve(\'less-loader\') // compiles Less to CSS
},
],
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
Python开发工具PyCharm的使用
下一篇 :
普华永道：大中型企业正加速采用公有云
-
好程序员大数据学习路线分享MapReduce全流程总结
2026-05-19栏目： 教程
-
什么是高防？有什么用？
2026-05-19栏目： 教程
-
阿里云如何添加CDN解析过程 新手必看教程
2026-05-19栏目： 教程
-
好程序员web前端学习路线分享css3中的渐进增强和降级
2026-05-19栏目： 教程
-
什么是苹果iOS超级签名源码系统？
2026-05-19栏目： 教程