使用ReactJs更改Ant Design变量

Question

我在应用程序中使用antd库。根据文档，我可以通过更改变量来自定义主题，例如：

modifyVars: {
  "primary-color": "#EB564F",
   "link-color": "#0DD078",
   "success-color": "#0DD078",
   "border-radius-base": "40px",
}

在我的react应用程序中，我做了类似的事情，添加了文件webpack.config.js和下面的代码：

// webpack.config.js
const antdRegex = /antd.+\.less$/;

module.exports = {
rules: [
    {
        test: antdRegex,
        loader: [
            "style-loader",
            "css-loader",
            {
                loader: "less-loader",
                options: {
                    lessOptions: {
                        modifyVars: {
                            "primary-color": "#EB564F",
                            "link-color": "#0DD078",
                            "success-color": "#0DD078",
                            "border-radius-base": "40px",
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        ],
    }]
}

但颜色没有变化。为什么？如何解决？

- Asking

---

你使用的 less loader 版本是哪个？ - Hemanthvrm

@Hemanthvrm，"less": "^4.1.1", "less-loader": "^7.3.0"，这个版本有问题吗？ - Asking

@Hemanthvrm，我刚刚设置了webpack.config.js，我需要设置其他什么东西才能使它可用吗？ - Asking

@Hemanthvrm，你能展示一下如何更改变量的代码片段吗？ - Asking

我在不同的less文件中使用我的变量，并使用lessToJs库导入它们以分配给该键...这样我就不必在将来更改我的webpack配置文件了。 - Hemanthvrm

Answer 1

在create-react-app中使用craco

要使webpack.config.js生效，您需要从create-react-app中弹出。如官方指南所述，craco包解决了这个问题。

1. 使用npm安装相关的craco包

npm install --save-dev @craco/craco craco-less

2. 将.css导入更改为.less

/* src/App.js */
import './App.css' -> './App.less';

/* src/App.less */
@import '~antd/dist/antd.css' -> '~antd/dist/antd.less';

3. 在项目根目录下创建craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "primary-color": "#EB564F",
              "link-color": "#0DD078",
              "success-color": "#0DD078",
              "border-radius-base": "40px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 在 package.json 文件中更新脚本

"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

5. 完成

- rezso.dev

---

我添加了上述更改，一切都正常工作，但是例如，如果我在 App.js 中导入一个带有 scss 扩展名的文件，则会出现错误：Cannot find module 'sass'，但是如果我将导入的文件扩展名更改为 less，则一切又正常了。为什么 CRACO 配置不允许使用 scss 扩展名，如何解决？ - Asking

Answer 2

不需要弹出create-react-app

要使webpack.config.js生效，您必须从create-react-app中弹出。 有一种解决方法不需要弹出您的项目。

步骤

1. 全局安装less
2. 创建一个main.less文件并在其中包含antd.less
3. 重新声明要覆盖的默认变量
4. 将main.less编译为.css，并将该文件包含在您的应用程序中

1. 全局安装less

npm install -g less

2-3. 创建一个main.less文件并在其中包含antd.less，然后重新声明要覆盖的默认变量

@import 'node_modules/antd/dist/antd.less';
@primary-color: #EB564F;
@link-color: #0DD078;
@success-color: #0DD078;
@border-radius-base: 40px;

4. 将main.less编译为.css文件，并将该文件包含在您的应用程序中

从您项目的根目录运行lessc "./src/styles/main.less" "./src/styles/css/antd.css" --js，然后在您的项目中导入此CSS文件。

---

来源：Customising Ant Design (antd) theme without using react eject or any unreliable packages

- rezso.dev

---

如果我运行 lessc "./src/styles/main.less ./src/styles/css/antd.css" --js，会得到 lessc: ENOENT: 没有那个文件或目录 的错误提示。 - Asking

可能只是由于命令中的引号拼写错误，请尝试：lessc "./src/styles/main.less" "./src/styles/css/antd.css" --js。如果不起作用，请提供更详细的错误信息。 - rezso.dev

你的回答很有帮助，但是这样做我必须增加项目超过500kb，因为那个文件几乎占据了这个大小。有没有一种解决方案可以改变一些Webpack的设置，但不需要弹出？ - Asking

你尝试过高级官方 CRA 指南吗？你需要安装并理解 craco 来在不弹出的情况下进行配置，但应该可以工作。 - rezso.dev

请查看我的其他答案以获取更多信息。 - rezso.dev

Answer 3

请查看 antd 文档以进行安装，如果您不想弹出您使用 CRA 创建的 React 应用程序。

https://ant.design/docs/react/use-with-create-react-app

这个答案是为那些想在使用 create react app 后手动安装 ANTD 的人准备的。

所用版本:

• CRA 4.0.3

React 安装步骤：

• 使用 yarn CRA 命令创建 react 应用 (yarn create react-app my-app)

• 将 react 应用 eject (yarn eject)

CRA 的样板代码中没有 less（至少在 4.0.3 版本之前）...因为 ANTD 是基于 less 的，所以我们需要手动安装它。（你可以直接导入 antd css 来跳过整个过程...但 antd css 不是按需下载的，这意味着即使我们不使用它们，也会下载所有组件的样式）

所用版本:

• antd - 4.13.1

• babel-plugin-import - 1.13.3 (用于按需导入组件)

• less- 4.0.0

• less-loader - 7.3.0

• less-vars-to-js - 1.3.0

步骤:

• 使用以下命令安装所有包

  yarn add antd@4.13.1 && yarn add babel-plugin-import@1.13.3 less@4.0.0 less-loader@7.3.0 less-vars-to-js@1.3.0 -D

Webpack配置和主题设置

1. 在package.json中安装antd的Babel插件

   "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ]

2. 在src文件夹中创建antdTheme.less文件...(我们在这里提供我们的主题设置)

3. 修改 webpack.config.js 文件（在该文件的三个位置进行修改）

   // Ant Design Webpack Config

   const lessToJs = require("less-vars-to-js");

   const themeVariables = lessToJs( fs.readFileSync(path.join(__dirname, "./../src/antdTheme.less"), "utf8") );

   const lessRegex = /.less$/;

   const lessModuleRegex = /.module.less$/;

添加if else条件并添加此代码..请参考图片中如何编写条件

loaders.push(
          {
            loader: require.resolve("resolve-url-loader"),
            options: {
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              lessOptions: {
                modifyVars: themeVariables,
                javascriptEnabled: true,
              },
            },
          }
        );

添加此代码以支持less和less模块

// Ant Design config
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using LESS
            // using the extension .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

修改这些文件后

• 使用yarn start启动您的应用程序。
• 您应该看到绿色作为主要颜色，因此我们在我们的主题less文件中使用了相同的颜色。 根据您的要求进行更改（记住，在对主题级别less文件进行更改时，您必须重新启动）...

- Hemanthvrm

---

请问您能否提供所有与我的问题相关的webpack-config.js文件，以更改antd变量？因为现在我无法成功地获取您的结果，因为该文件中还有其他设置。这将对我非常有帮助。 - Asking

给我一些时间，我可以将完整的项目上传到我的Github上。你可以参考它。 - Hemanthvrm

请确保使用CRA 4.0.3生成项目以匹配webpack代码，或直接使用我的存储库... https://github.com/hemanthvrm/CRA4-ANTD4 - Hemanthvrm

谢谢你的仓库，它很有帮助。但是这样做我必须要“eject”我的应用程序。有没有一种解决方案，可以使用这个原则来改变变量，但不需要弹出简单的React应用程序？ - Asking

打开我的回答中的antd链接，并参考craco库的解决方案。 - Hemanthvrm

Answer 4

非常好，@rezso.dev 上面所说的很有效 - 在不弹出 create-react-app 的情况下。

其他可以编辑的变量：

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

https://ant.design/docs/react/customize-theme

- stefantut