基于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：（修改"scripts"的启动配置为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修改默认配置：

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重启项目。

项目测试

　　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样式文件成功）

总结

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

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

猜你喜欢