效果图

成功改为黑色和紫色

Create React App (CRA) 的配置方法

"dependencies": {"@ant-design/icons": "^4.7.0","antd": "^4.23.6","react": "^18.2.0","react-dom": "^18.2.0"
},
"devDependencies": {"@types/customize-cra": "^1.0.3","@types/node": "^16.11.66","@types/react": "^18.0.21","@types/react-dom": "^18.0.6","babel-plugin-import": "^1.13.5","customize-cra": "^1.0.0","less": "^4.1.3","less-loader": "^11.1.0","react-app-rewired": "^2.2.1","react-scripts": "5.0.1","typescript": "^4.8.4"
},

根目录创建 config-overrides.js , 并写入以下内容

const {override,addWebpackAlias,addLessLoader,addBabelPlugin,adjustStyleLoaders
} = require("customize-cra");
const path = require("path");module.exports = override(addWebpackAlias({"@": path.resolve(__dirname, "src")}),addLessLoader({lessOptions: {javascriptEnabled: true,modifyVars: {hack: `true;@import (reference) "${path.resolve(__dirname, './src/styles/variables.less')}";`,},}}),addBabelPlugin(["import", {"libraryName": "antd","libraryDirectory": "es","style": true}]),adjustStyleLoaders(({ use: [, , postcss] }) => {const postcssOptions = postcss.options;postcss.options = { postcssOptions };}),);

创建 src/styles/variables.less

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色

(可选) 添加 TypeScript 类型
react-app-env.d.ts 如下

/// <reference types="react-scripts" />
declare module '*.module.less' {const classes: { readonly [key: string]: string };export default classes;
}

Next.js 的配置方法

"antd": "^4.21.0",
"next": "^12.1.0",

"less": "^4.1.2",
"less-loader": "^10.2.0",
"next-with-less": "^2.0.5",
//让 Next.js 支持 less
// (官方只支持 sass, 而且官方以后也不会添加 less 的支持)

"next-transpile-modules": "^9.0.0",
// 处理一下 node_modules 中的 antd ,让 Next.js 可以引入 antd 的 css 文件

"babel-plugin-import": "^1.13.5",
// 配置 antd 按需导入  ( 上面的插件都是前置条件, 要不然就报错)
// 虽然 Next.js v12.1 加入了swc,
// 但 swc 暂时还没有提供 `babel-plugin-import` 类似的功能,
// 以后有了就不需要本文的方法了, )

`next.config.js`

let plugins = require("next-compose-plugins");
let withLess = require("next-with-less");const withTM = require("next-transpile-modules")(["antd", "@ant-design/icons"]);let { resolve } = require('path')/** @type {import('next').NextConfig} */
const nextConfig = {reactStrictMode: true,swcMinify: true,// 这里都是默认的配置, 与本文无关
};let config = [[withLess,{lessLoaderOptions: {lessOptions: {modifyVars: {hack: `true;@import (reference) "${resolve(__dirname, './styles/variables.less')}";`,},},},javascriptEnabled: true,}],[withTM]
];module.exports = plugins(config, nextConfig);

创建 styles/variables.less

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色

`.babelrc`

根目录新建一个 .babelrc 文件

{//Next.js的总配置文件，相当于继承了它本身的所有配置"presets": ["next/babel"],"plugins": [[//增加新的插件，antd 按需引入"import",{"libraryName": "antd","libraryDirectory": "es","style": true // true 是加载 LESS 相关的 "es/style/index.js"// 如果改为 "css", 则是 CSS 相关的 "es/style/css.js" }]]
}

Vite 的配置方法

"vite-plugin-imp": "^2.3.0"
"less": "^4.1.3",

`vite.config.ts`

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import VitePluginImp from "vite-plugin-imp";
import { resolve } from "path";export default defineConfig({resolve: {alias: [// fix less import by: @import ~// less import no support webpack alias '~' · Issue #2185 · vitejs/vite{ find: /^~antd/, replacement: "antd" },// 自己用的 @ , 和本文无关{ find: "@", replacement: resolve(__dirname, "./src") },]},plugins: [react(),// css/less 按需导入  // https://github.com/onebay/vite-plugin-impVitePluginImp({libList: [{libName: "antd",// style/index.js 是 less (index.js 名称可以省略), style/css.js 是 css// 这里使用 lessstyle: (name) => `antd/es/${name}/style`,},],})],css: {// 开启 css 的 SourceMapdevSourcemap: true,// 配置 LesspreprocessorOptions: {less: {javascriptEnabled: true,// 加载自己的 less 变量modifyVars: {hack: `true;@import (reference) "${resolve(__dirname, './src/styles/variables.less')}";`,},},},},})

在根目录创建 src\styles\variables.less
随便改点 (支持热更新)

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色

React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less相关推荐

vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
yii2-按需加载并管理CSS样式/JS脚本
(注:以下为Yii2.0高级:注意代码中php标签自己补上) 一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAs ...
react --- 按需加载组件
问题描述使用 antd库时使用按钮,须导入如下 import Button from 'antd/lib/button' import 'antd/dist/antd.css' 这样会导入全局的样 ...
自制 require 函数：让浏览器轻松实现 js 文件按需加载
唉?这种文章你也点进来看,你不知道有 LABjs.RequireJS.SeaJS... 这些库吗? 反正我是没用过这些库,什么 AMD .CMD 哪来那么多术语... 前端的库太多了,要看各种乱七八糟 ...
js资源按需加载和预加载
. 很多同志可能忘记怎么写按需加载,一篇文章让你读懂. 1 这里资源指cssjs文件img图片按需加载即加载现在需要使用的预加载指在空闲的时间里加载其他的资源 <img src=" ...
ant-design如果按需加载组件
Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验官网地址:https://ant.design 1.安装: npm in ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
PDF.js 实现pdf分页加载的前端优化(实现按需加载)-前端的demo也已经上传
描述 pdf.js实现了分片加载,但是在首次加载时自动加载了全部的pdf分片,导致打开了几个超过1g的pdf时,浏览器报出内存不足的提示解决方案实现pdf.js的按需加载,只需要修改属性disab ...

React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less

效果图

Create React App (CRA) 的配置方法

Next.js 的配置方法

`next.config.js`

`.babelrc`

Vite 的配置方法

`vite.config.ts`

React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less相关推荐

最新文章

热门文章