UMI 动态换肤的N种姿势

前端

2023-10-03 14:52:28

在 umi 项目中实现动态换肤，有以下几种方法：

通过 less.modifyVars 修改 less 变量实现
使用 var css 实现

以下是我对这两种方法的分析：

使用 less.modifyVars 修改 less 变量实现
- 优点：
  - 实现简单
  - 支持所有浏览器
- 缺点：
  - 只能修改 less 变量，不能修改 css 变量
  - 如果 less 变量太多，修改起来会很麻烦
使用 var css 实现
- 优点：
  - 可以修改 css 变量
  - 修改起来很方便
- 缺点：
  - 不支持所有浏览器
  - 在 umi 项目中，需要使用 postcss-modules 来支持 var css

推荐：使用 less.modifyVars 修改 less 变量实现

less.modifyVars 修改 less 变量实现方法更简单，并且支持所有浏览器。在 umi 项目中，我们也可以使用 postcss-modules 来支持 var css，但是这样会增加项目的复杂性。

具体实现步骤如下：

在 umi 项目中，安装 less 和 less-loader：

npm install less less-loader --save-dev

在 webpack.config.js 文件中，添加以下配置：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
  ...
};

在你的 less 文件中，使用 less.modifyVars 函数来修改 less 变量：

less.modifyVars({
  'primary-color': '#1890ff',
});

然后，你就可以在你的组件中使用 less 变量了：

import { Button } from 'antd';

const App = () => {
  return (
    <div>
      <Button type="primary">按钮</Button>
    </div>
  );
};

export default App;