使用 GatsbyJS 时更改 Antd 的主题

Question

这个 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 中将在哪个文件中设置这样的变量。

Answer 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"
  }
}

Answer 2

我已经尝试过几年前写的所有上述答案，但没有用。经过几个小时的研究，终于，我能够antd使用gatsby. 这是解决方案：

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 默认变量