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

最新推荐文章于 2023-09-08 13:45:49 发布

VIP文章请针对我谢谢

最新推荐文章于 2023-09-08 13:45:49 发布

阅读量2k

点赞数

分类专栏： react node 个人心得文章标签： reactjs antd

本文链接：https://blog.csdn.net/weixin_42833042/article/details/105835365

版权

一、实现原理

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

二、前期准备

(一) 安装相关依赖

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:

最低0.47元/天解锁文章

请针对我谢谢

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
react+less实现antd全局主题在线替换

一、实现原理使用一些外部依赖，在webpack打包前先把antd所有的样式抽离出来到一个独立的css样式表，然后在html模板的<body>顶层中手动引用这个样式来达到样式覆盖的。二、前期准备(一) 安装相关依赖npm i less less-loader antd-theme-generator(二) 配置less-loader以启用变量修改功能在webpack.c...
复制链接

扫一扫