React@16.13.1配合antd UI使用，自定义主题

2020-06-13 21:53:10 阅读：247 来源： 互联网

标签：16.13 react 自定义 less color app yarn React import

本文建议使用yarn进行环境搭建和后续项目启动之类的

安装yarn

npm -g install yarn
// -g代表全局安装

接下来，使用yarn进行安装

// 初始化项目
create-react-app imooc
// 添加antd
yarn add antd
// 使用react-app-rewired customize-cra就不用暴露webpack等配置文件 
yarn add react-app-rewired customize-cra -D
// 安装less相关
yarn add less less-loader babel-plugin-import -D

修改一下package.json里面 “scripts”，且需要添加一些代码

// 将配置修改成如下
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

"babel": {
    "presets": [
      "react-app"
    ],
    // 下面这段为添加
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "lib",
          "style": "css"
        }
      ]
    ]
  },

接着就是配置，在根目录下新建文件，名为 config-overrides.js

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: true, # 这里不注释掉就无法使用less修改主题，这里的功能是样式按需加载
  }),
  addLessLoader({
    lessOptions: { 
        javascriptEnabled: true,
    }
  }),
);

接着在src目录下新建less文件（此处当做全局样式文件使用）

// 文件名为common.less
@import "~antd/dist/antd.less";  //引入官方样式的less文件

@primary-color: #e2aa11;                         // 全局主色
@link-color: #e2aa11;                            // 链接色
@success-color: #52c41a;                         // 成功色
@warning-color: #faad14;                         // 警告色
@error-color: #f5222d;                           // 错误色
@font-size-base: 14px;                           // 主字号
@heading-color: rgba(0, 0, 0, .85);              // 标题色
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius-base: 4px;                        // 组件/浮层圆角
@border-color-base: #d9d9d9;                     // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮层阴影

然后在App.js中引入

import React from 'react';
import Home from './pages/Home'
import './common.less';

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;

这个时候，就可以跑项目启动命令了

yarn start

等候着项目启动，项目启动后可能会有报错，提示找不到 react-scripts/package.json

原因在于package.json的“scripts”被修改

既然提示没有，那就继续安装

yarn add react-scripts

最终，成功看到项目启动！

标签：16.13,react,自定义,less,color,app,yarn,React,import
来源： https://www.cnblogs.com/zhichong/p/13121893.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React@16.13.1配合antd UI使用，自定义主题