使用 craco 在运行时更改 antd 变量
Change antd variables at runtime with craco
我必须能够在运行时更改 ant 设计变量(而不是通过无主题文件)。
我发现了很多使用 customize-cra 和 react-app-rewire-less 的例子,但是 none 似乎与 craco 一起工作。我必须使用 craco,因为我也在这个项目中使用 tailwindcss。
我尝试过的:
- antd-theme-webpack-plugin:我可以访问
window.less.modifyVars
,但它似乎什么也没做(调用它不会抛出任何错误,但 antd 颜色不会t 改变);
- antd-theme-switcher:和上面的很像,
window.less.modifyVars
好像没有作用;
- antd-theme:我不知道如何在
craco.config.js
中添加 AntdThemePlugin.loader
,我不确定那是问题,但我无法让它工作。
这是我的 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 },
],
};
此时我真的要尝试任何可能的解决方案,这个问题真的很耗时。
截至今天,我已经开始工作了。第二种解决方案 (antd-theme-switcher) 实际上按预期工作。我的错误是我在我的主 less 文件中添加了 antd 默认变量,但为了这个工作我必须在我的 public 文件夹中添加 color.less 文件(作为 antd-theme 中的第二步-switcher 说),这样 window.less.modifyVars
就可以使用更少的文件。
虽然这似乎不是最高效的方法,但我将尽快放弃在我的项目中使用 antd,因为似乎没有最佳解决方案可以在运行时使用它更改变量具体设置。
我必须能够在运行时更改 ant 设计变量(而不是通过无主题文件)。 我发现了很多使用 customize-cra 和 react-app-rewire-less 的例子,但是 none 似乎与 craco 一起工作。我必须使用 craco,因为我也在这个项目中使用 tailwindcss。
我尝试过的:
- antd-theme-webpack-plugin:我可以访问
window.less.modifyVars
,但它似乎什么也没做(调用它不会抛出任何错误,但 antd 颜色不会t 改变); - antd-theme-switcher:和上面的很像,
window.less.modifyVars
好像没有作用; - antd-theme:我不知道如何在
craco.config.js
中添加AntdThemePlugin.loader
,我不确定那是问题,但我无法让它工作。
这是我的 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 },
],
};
此时我真的要尝试任何可能的解决方案,这个问题真的很耗时。
截至今天,我已经开始工作了。第二种解决方案 (antd-theme-switcher) 实际上按预期工作。我的错误是我在我的主 less 文件中添加了 antd 默认变量,但为了这个工作我必须在我的 public 文件夹中添加 color.less 文件(作为 antd-theme 中的第二步-switcher 说),这样 window.less.modifyVars
就可以使用更少的文件。
虽然这似乎不是最高效的方法,但我将尽快放弃在我的项目中使用 antd,因为似乎没有最佳解决方案可以在运行时使用它更改变量具体设置。