React4.x配置样式按需引入和自定义主题
安装所需依赖
yarn add @craco/craco babel-plugin-import craco-less
添加配置文件
在根目录创建craco.config.js文件
craco.config.js文件内容
const CracoLessPlugin = require('craco-less');module.exports = {
// 配置按需引入
babel:{
plugins: [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true //设置为true即是less
}
]
]
},
plugins: [{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
'@primary-color': '#1DA57A'
},
javascriptEnabled: true,
},
},
},
},],
};
启动项目查看结果
app.js
import React, {Component} from 'react';// 引入antd
import { Button } from 'antd';
class App extends Component {
render() {
return (
<div>
App.....
App.....
App.....
<Button type="primary">Primary Button</Button>
</div>
);
}
}
export default App;
index.js
import React from 'react';import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
效果图
按钮为绿色即为成功
以上是 React4.x配置样式按需引入和自定义主题 的全部内容, 来源链接: utcz.com/z/383781.html