最近做了一个需求,后台管理系统添加一个可以动态修改ant-design主题色.查询了大多数的文章,发现基本都是抄来抄去,而且文章记录的也一点也不详细.刚刚把这个功能做完了,顺便记录一下如何去修改主题色.主要使用到的包是antd-theme-generator.使用起来非常方便,而且在热更新时,不会出现 js 内存爆栈现象. 主题思想:主要使用 antd 的 less 变量,修改全局的 less 变量,完成样式的更新.以下是 less 等版本信息. 案例网址: https://azhengpers…

最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less (2)根目录添加config-overrides.js (3)修改npm script即可, 一切正常 参考官网 这里主要说的是自建的react项目中如何配置及其容易出现的坑 一.按需加载 (1)在.babelrc中添加plugins…

在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个react项目 yarn add antd less less-loader babel-plugin-import 需要配置的 less 和 babel依赖 暴露wenpack文件的指令是yarn eject.  在使用这个指令之前要先推送一次git文件才行.或者删除git文件. 提交git : git…

如果是自己配置的reac项目,而非官方推荐的creat-react-app或者dva-cli等阿里自己开发的脚手架去引入antd,会有两个问题 第一,用babel-plugin-import设置style true 并不能通过less的方法引入antd 的样式.只能自动引入css.需要手动去引入less文件导入样式. 第二,既然无法自动按需引入less文件也就无法去改主题色,即使手动引入全局的antd,去改 primary-color 也不能生效. 即使在loader 添加options{"mo…

项目地址 vite.config.ts 插件和vite配置 import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; import vueJsx from "@vitejs/plugin-vue-jsx"; import AutoImport from "unplugin-au…

一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = {     //页面入口文件配置     entry: {         index: './src/index.js'     },     //入口文件输出配置     output: {     …

webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将以app.js及其依赖的js文件打包到dist文件夹下的main.js文件下 var path = require('path') module.exports = { // 入口文件配置 entry: "./src/app.js", // 出口文件配置项 output: { // 输出的…

下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel-core还是不行.对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.…

概述 antd是蚂蚁金服打造的一个react组件,真的非常棒,我看了下官方文档,感觉比bootstrap要好.唯一的缺点可能就是打包的时候要打包它的一些样式表,所以资源体积会很大,并且css可能会和自己的相冲突. 我在webpack中配置antd配置了很久,现在把它记录下来,供以后开发时参考,相信对其他人也有用. 配置 配置代码如下: module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'bab…

本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When usi…