使用 GatsbyJS 时更改 Antd 的 Theme答案

【问题标题】：Change the Theme of Antd when using GatsbyJS使用 GatsbyJS 时更改 Antd 的 Theme
【发布时间】：2019-01-20 17:31:16
【问题描述】：

这个 GatsbyJS/antd 插件页面 (https://github.com/bskimball/gatsby-plugin-antd/issues/2) 使得在使用 GatsbyJS 时似乎可以编辑 ant.design (antd) 主题。提供的代码是

plugins: [
  {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
  }
]

但没有其他信息。在哪里可以更改主题原色之类的内容（如所述：https://ant.design/docs/react/customize-theme）。 ant.design 页面 (https://ant.design/docs/react/customize-theme) 说通过执行以下操作来更改原色：

"theme": {
  "primary-color": "#1DA57A",
},

目前尚不清楚 GatbsyJS 将在哪个文件中设置这样的变量。

【问题讨论】：

标签： antd gatsby

【解决方案1】：

GitHub 回购与示例：https://github.com/uciska/gatsby-less-v2。要使 Antd 正常工作，必须对三个 Gatsby 文件进行更改。

gastby-config.js 示例：

module.exports = {
  siteMetadata: {
    title: 'My site'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#da3043',
          'font-family': 'Arial',
          'layout-body-background': '#66ff79'
        }
      }
    }
  ]
}

gastby-node.js 示例：

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: 'babel-plugin-import',
    options: {
      libraryName: 'antd',
      style: true
    }
  })
}

示例 package.json：

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "antd": "^3.6.4",
    "babel-plugin-import": "^1.8.0",
    "gatsby": "next",
    "gatsby-plugin-less": "next",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-apollo": "^2.1.11"
  }
}

【讨论】：

如果你使用的是 gatsby-plugin-antd，你不需要编辑 gatsby-node
@cannin 为什么我们需要包含less-loader？ gatsby-plugin-less不是给我们加的吗？
@BrianKimball 我使用了 gatsby-plugin-antd，但仍然需要编辑 gatsby-node.js 才能生效。

【解决方案2】：

感谢@cannin 的原始答案。我已经用最新的库名称更新了它并重新组织了文本。

在 Gatsby 中使用 ANTD 并覆盖原始样式

添加依赖
yarn add babel-plugin-import less-loader antd gatsby-plugin-less

更新 Gatsby 的设置：
gastby-config.js
添加到plugins 数组

{
  resolve: `gatsby-plugin-less`,
  options: {
    javascriptEnabled: true,
    modifyVars: {
      'primary-color': '#663399',
      'font-family': 'Arial',
      'layout-body-background': '#66ff79'
    }
  },
},

gastby-node.js

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: 'babel-plugin-import',
    options: {
      libraryName: 'antd',
      style: true
    }
  })
}

在组件中使用antd 的示例。此primary 按钮应显示为 Gatsby 紫色 #663399

import React from "react"
import Layout from '../components/layout'
import {Button} from 'antd'

export default () => (
  <Layout>
    <div>
      <h1>ANTD</h1>
      <p>Such wow. Very React.</p>
      <Button type="primary">Button</Button>
    </div>
  </Layout>
)

【讨论】：

为什么需要安装less-loader？不应该少和 gatsby-plugin-less 就足够了。
javascriptEnabled 属性应该在lessOptions 中。

【解决方案3】：

此配置对我有用。我没有添加babel-plugin-import 也没有修改gatsby-node.js 文件。

这是我的package.json 文件

{
  "name": "web-master",
  "private": true,
  "description": "Become a fullstack developer",
  "version": "1.0",
  "author": "Vishal Shetty",
  "dependencies": {
    "gatsby": "^2.19.7",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "antd": "^3.26.12",
    "gatsby-plugin-antd": "^2.1.0",
    "gatsby-plugin-less": "^3.0.19",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}

我的gatsby-config.js 文件

module.exports = {
  siteMetadata: {
    title: `WebMaster`,
    description: `Become a fullstack developer`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: "gatsby-plugin-antd",
      options: {
        style: true,
      },
    },
    {
      resolve: "gatsby-plugin-less",
      options: {
        javascriptEnabled: true,
        modifyVars: {
          "primary-color": "#E4572E",
        },
      },
    },
  ],
}

注意插件gatsby-plugin-antd 和gatsby-plugin-less 配置。

就是这样，它的工作原理。

【讨论】：

我试过这个，在我的情况下它不起作用，你有这个解决方案的codeandbox示例吗？

【解决方案4】：

我已经尝试了几年前写的所有上述答案，但没有奏效。经过几个小时的研究，我终于可以用gatsby 修改antd 默认变量。这是解决方案：

gatsby-config.js

[
...
...
   {
      resolve: "gatsby-plugin-antd",
      options: {
        style: true,
      },
    },

    {
      resolve: "gatsby-plugin-less",
      options: {
        lessOptions: {
          modifyVars: { //direct child node of lessOptions
            "primary-color": "#C53333", //your preferred color
          },
          javascriptEnabled: true, //direct child node of lessOptions
        },
      },
    },

]

less 和 less-loader 不需要修改默认的 antd 变量。

package.json

"dependencies": {
  "antd": "^4.12.2",
  "gatsby-plugin-antd": "^2.2.0",
  "gatsby-plugin-less": "^4.7.0",
}

旁注：查找所有 ant-design 默认变量 here

【讨论】：

我不得不从我的顶级 css 文件中删除 @import '~antd/dist/antd.css'; 以避免覆盖较少的变量。