React4.x配置样式按需引入和自定义主题

react

安装所需依赖

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

回到顶部