React 통합 less&AntD/필요 에 따라 구성 요소+맞 춤 형 테마 불 러 오기

1441 단어 react.jslessantd
1.less,less-loader,antd 설치
yarn add less less-loader antd

2.react-app-rewired,customeized-cra,babel-plugin-import 설치
yarn add react-app-rewired customize-cra babel-plugin-import

#   [email protected]
yarn add react-app-rewired customize-cra@next babel-plugin-import

3.package.json 설정
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

4.프로젝트 루트 디 렉 터 리 에 config-over rides.js 를 만들어 기본 설정 을 수정 합 니 다.
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: { //     less-loader@5,    lessOptions          。
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    },
  }),
);

5. Test.js
import React, { Component } from 'react';
import { Button } from 'antd';

class Test extends Component {
  render() {
    return (
      
); } } export default Test;

녹색 단 추 를 보면 설정 이 성공 했다 는 뜻 입 니 다.

좋은 웹페이지 즐겨찾기