3

我必须能够在运行时更改 ant 设计变量（而不是通过无主题文件）。我发现很多使用customize-cra和react-app-rewire-less的例子，但似乎没有一个适用于 craco。我必须使用 craco，因为我也在这个项目中使用tailwindcss 。

我试过的：

  • antd-theme-webpack-plugin：我可以访问window.less.modifyVars，但它似乎什么也没做（调用它不会引发错误，但 antd 颜色不会改变）；
  • antd-theme-switcher：和上面的很相似，window.less.modifyVars好像没什么效果；
  • antd-theme：我不知道如何添加AntdThemePlugin.loaderincraco.config.js，我不确定这是问题所在，但我无法让它工作。

这是我的当前状态craco.config.js：

const path = require("path");
const CracoAntDesignPlugin = require("craco-antd");

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {
  antDir: path.join(__dirname, "./node_modules/antd"),
  stylesDir: path.join(__dirname, "./src"),
  varFile: path.join(__dirname, "./src/styles/variables.less"),
  themeVariables: ["@primary-color"],
  indexFileName: false,
  generateOnce: false,
};
const ThemePlugin = new AntDesignThemePlugin(options);

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "./src/styles/variables.less"
        ),
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
              "@primary-color": "#00375B",
            },
          },
        },
      },
    },
    { plugin: ThemePlugin },
  ],
};

在这一点上，我真的要尝试任何可能的解决方案，这个问题真的很耗时。

4

1 回答 1

1

到今天为止，我已经开始工作了。第二种解决方案（antd-theme-switcher）实际上按预期工作。我的错误是我在我的主文件中添加了 antd 默认变量，但是为了让它工作，我必须在我的公共文件夹中添加 color.less 文件（正如 antd-theme-switcher 中的第二步所说），所以可以window.less.modifyVars使用的文件较少。

不过，这似乎不是最具性能的方法，我将尽快在我的项目中使用 antd，因为似乎没有最佳解决方案来使用这种特定设置在运行时更改变量。

于 2021-03-16T17:57:04.297 回答