react+less实现antd全局主题在线替换

一、实现原理

使用一些外部依赖，在webpack打包前先把antd所有的样式抽离出来到一个独立的css样式表，然后在html模板的顶层中手动引用这个样式来达到样式覆盖的。

二、前期准备

(一) 安装相关依赖

npm i less less-loader antd-theme-generator

(二) 配置less-loader以启用变量修改功能

在webpack.config.js中(注意，如果是使用create-react-app创建的项目，需要运行npm run eject暴露配置才会有这个webpack配置文件):

//先在顶部定义好less文件类型解析的正则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

找到file-loader的配置，在它前面加上：

 // 增加对xx.less文件解析{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction && shouldUseSourceMap,},'less-loader',{javascriptEnabled:true}),sideEffects: true,},// 增加对modules内关于import'/xx.less'文件的识别{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction && shouldUseSourceMap,modules:{getLocalIdent: getCSSModuleLocalIdent,},},'less-loader',{javascriptEnabled:true})},

另外，对于create-react-app版本比较高的同学，或许需要在webpack.config.js中的getStyleLoaders中做些许修改来适配less-loader的option设置：

  const getStyleLoaders = (cssOptions, preProcessor,more={}) => {const loaders = [isEnvDevelopment && require.resolve('style-loader'),isEnvProduction && {loader: MiniCssExtractPlugin.loader,options: paths.publicUrlOrPath.startsWith('.')? { publicPath: 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！