react3.x配置樣式按需引入和自定義主題
阿新 • • 發佈:2021-09-09
react3.x配置樣式按需引入和自定義主題
安裝依賴包
yarn add react-app-rewired customize-cra babel-plugin-import less [email protected]
修改package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
新增配置檔案
在根目錄下建立config-overrides.js檔案
config-overrides.js檔案內容
const {override, fixBabelImports, addLessLoader} = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ lessOptions: { javascriptEnabled:true, modifyVars: {'@primary-color': '#1DA57A'}, } }), );
啟動專案
App.js
import React, {Component} from 'react'; // 引入antd import { Button, Icon } from 'antd'; import './App.css'; class App extends Component { render() { return ( <div> App..... App..... App.....<Icon type="smile" theme="twoTone" /> <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'));
效果
看到綠色按鈕就代表成功了!
注意內容
啟動專案,如果遇到報錯,可能是less-loader這個包的版本太高了,語法有問題。所以解除安裝之後,安裝作者測試的版本即可正常啟動