Ant 半动态主题

前言

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

安装包 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()