自定义主题
首先自定义主题需要修改antd，antd本身也是less写的之后编译成css的，所以当我们需要使用less。
1.yarn add react-app-rewire-less –dev
1
2
3
4
5
6
7
8
9
10
11
| 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_script/config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件
- test: /.css$/ 改为 /.(css|less)$/
- test: /.css$/ 的 use 数组配置增加 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
31
32
33
34
35
| {
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader')
}
],
},
|
