react antd 修改默认样式重写less

Posted 2023-04-22

参考技术A 1.npm install react-app-rewired customize-cra --save-dev

/* package.json */

"scripts":

-   "start": "react-scripts start",

+   "start": "react-app-rewired start",

-   "build": "react-scripts build",

+   "build": "react-app-rewired build",

-   "test": "react-scripts test --env=jsdom",

+   "test": "react-app-rewired test --env=jsdom",



2.然后在项目根目录创建一个config-overrides.js 用于修改默认配置。

const  override, fixBabelImports, addLessLoader  = require('customize-cra');

const theme = require('./your-theme-file');

module.exports = override(

    addLessLoader(

      lessOptions:

        javascriptEnabled:true ,

        modifyVars:theme,

        cssModules: 

          localIdentName: "[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.

        ,

        sourceMap: true,

      ,

    ),

    fixBabelImports('import', 

      libraryName: 'antd-mobile',

      libraryDirectory: 'es',

      style: true,

    ),

);

3.创建 your-theme-file.json  编写替换 antd属性



    "@brand-primary": "#d7000f"



4.package.json



  "name": "web-app",

  "version": "0.1.0",

  "private": true,

  "dependencies": 

    "@testing-library/jest-dom": "^4.2.4",

    "@testing-library/react": "^9.5.0",

    "@testing-library/user-event": "^7.2.1",

    "core-js": "^3.6.5",

    "react": "^16.13.1",

    "react-app-polyfill": "^1.0.6",

    "react-dom": "^16.13.1",

    "react-scripts": "3.4.2"

  ,

  "scripts": 

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  ,

  "eslintConfig": 

    "extends": "react-app"

  ,

  "browserslist": 

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all",

      "ie > 9"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version",

      "ie > 9"

    ]

  ,

  "devDependencies": 

    "babel-plugin-import": "^1.13.0",

    "customize-cra": "^1.0.0",

    "less": "^3.12.2",

    "less-loader": "^6.2.0",

    "react-app-rewired": "^2.1.6"

  

基于create-react-app脚手架，按需加载antd组件以及less样式

前言

为了更好的书写css样式，在react中引入less，在网上查询了许多关于react引入less样式文件的资料，大多数都是需要在react项目中npm run eject暴露出底层文件，然后在底层文件中修改dev-env的环境配置。在请教了大佬后知道可以根据antd官网文档中的高级配置来配备less，通过react-app-rewired来对默认配置进行自定义化，在新的@2.x版本中还需要下载customize-cra。这样我们就可以在项目的根目录下创建一个配置文件来修改默认的配置了。详细介绍可以参考antd官方网站的高级配置文档。

环 境 依 赖

1

下载安装相关配置、依赖

npm install less less-loader --save //安装less、less-loader依赖npm install react-app-rewired customize-cra --save //安装自定义配置相关的依赖库npm babel-plugin-import --save //安装用于按需加载的babel插件

2

修改项目启动配置package.json

修改"script"的启动配置为react-app-rewired。

"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject"}

3

创建config-overrides.js文件

在根目录下创建config-overrides.js文件覆写修改webpack默认配置。

const { override, fixBabelImports, addLessLoader } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' }, }),);

4

npm start重启项目

运行命令：npm start 重新启动项目。

npm start

实 例 测 试

1

App.js组件

import React, { Component } from 'react';import './App.less' //引入less样式文件import { Button, Tag } from 'antd'; //引入antd的按钮、标签组件 class App extends Component { render() { return ( <div className="box"> <Button type='danger'>请点击我一下</Button> <div className='home'><Home /></div> </div> ); }} //无状态功能函数组件const Home = () =>{ return ( <div className='box-items'> <div className="box-item"> <Tag color='#f50'>啊！我被电击了</Tag> <Tag color='#108ee9'>Hello!React</Tag> <Tag color='#faad14'>警告你别搞事啊，小老弟！</Tag> </div> </div> )} export default App;

2

App.less样式

/*{App组件less样式}*/.box { width: 100vw; height: 30vh; background: wheat; .unity(); flex-direction: column; .home{ margin: 20px; }} /*{Home组件less样式}*/.box-items{ width: 30vw; height: 10vh; background: pink; .unity();} /*{通一less样式}*/.unity{ display: flex; justify-content: center; align-items: center;}

3

测试运行结果

总 结

less.js让css的写法更加的灵活且更趋近于html的方式书写样式，为了在react项目中引入less，参考了antd的高级配置引入了我们项目中所需要的less样式，这个方法简化了配置less的操作，同时也避免了eject暴露底层文件。基于个人在开发过程中的经历，故此分享一下这个引入less的方式。antd官网还有另一种比较类似的方式引入less，在此就不多复述，如大家有更好更灵活的方式，可以一起探讨学习。

End