Ant 半动态主题

关注

原创最新推荐文章于 2026-04-16 11:05:06 发布 297 阅读 AI 写同款· GEO 优化 ›

使用antd-theme-webpack-plugin报错Error LessError: Cannot find module ‘antd/lib/style/themes/default.less 文件的 362 行使用了。所以问题就定位到了这个文件，而这个文件所在的包是。的代码，当做我们的自定义插件，然后自己主动安装。，需要我们独自分离这两个包，因为我们安装的是。配置里的引用自己定义的插件，其他不需要改动。注释掉了，所以断定是这个依赖的版本有问题。文件，我们可以去全局搜索哪里使用了。插件：里面的代码直接复制。启动服务就报错了：错误如下。我的做法是自己复制一份。启动服务，就没有报错了。阅读详情

前言

为什么是半动态？因为我不会做全动态，而且全动态有性能影响
什么是半动态，往下看就知道了

安装包 less 和 less-loader

npm install less less-loader --save-dev

配置webpack的rule

{
  test: /\.less$/,
  use: [{
      loader: "style-loader" // creates style nodes from JS strings
  }, {
      loader: "css-loader", // translates CSS into CommonJS
  }, {
      loader: "less-loader", // compiles Less to CSS
      options: {
        lessOptions: {
          modifyVars: {
          },
          javascriptEnabled: true,
        },
      },
  }],
},

添加主题文件 mytheme.less

在这里插入图片描述

内容如下：

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';

// 更改 ant 的主题颜色
@primary-color: rgba(34, 252, 6, 0.533);

动态引入主题文件

class Theme {
    init(){
        if(true){
            import("./mytheme.less").then(()=>{});
        }
        else{
            
        }
    }
}

export default new Theme()