# React之Antd,Less配置自定义主题色
搭建React环境,创建入门demo,并配置Antd按需加载及使用less,自定义主题色
# 安装React
yarn global add create-react-app
#或
npm install -g create-react-app
1
2
3
2
3
# 创建应用react-study
create-react-app react-study
1
# 基础配置
# 安装常用依赖
yarn add react-router-dom axios less-loader less
1
# 暴露配置文件
yarn eject
1
# 配置less
在webpack.config.js配置lessless-loader less
- 修改一
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
1
2
2
修改为:
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;
1
2
2
- 修改二
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
修改为:
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 添加Ant Design依赖
yarn add antd
1
# 配置Antd的css按需加载
安装babel-plugin-import插件
yarn add babel-plugin-import
1
# 方式一
先安装babel
插件,然后在项目的根目录下(就是和package.json
相同的层级)新建文件babel.config.js
,里面的内容如下
module.exports = {
plugins: [
["import", { libraryName: "antd", style: true}] // `style: true` 会加载 less 文件
]
};
1
2
3
4
5
2
3
4
5
# 方式二
在webpack.config.js中修改如下代码:
- 改动一:
//添加
modifyVars: { '@primary-color': '#f9c700' },
javascriptEnabled: true,
1
2
3
2
3
修改后:
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
modifyVars: { '@primary-color': '#f9c700' },
javascriptEnabled: true,
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 改动二
//添加
["import", { libraryName: "antd", style: true}]
1
2
2
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
["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,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
至此引入antd及按需加载,使用less作为业务代码的样式文件,并实现css模块化配置完成。
# 效果
成功修改主题色为黄颜色
# 可能出现问题
# 按需加载编译后报错.bezierEasingMixin()
babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()
原因:
因为less版本过高不兼容问题 参考github解决办法链接 (opens new window)
解决方案:
打开项目package.json发现less版本是^3.x.x ,将less版本降到3.0以下 比如安装 2.7.3版本。
两种方式:
- 安装低版本
yarn add less@^2.7.3
1- 打开项目的package.json
找到dependencies下面的less 将其版本改为 "2.7.3" 然后
yarn install
# 引入antd报警告
删除<React.StrictMode>标签解决引入antd控制台报警告
错误信息:
findDOMNode is deprecated in StrictMode xxx...
1
<React.StrictMode>