Gatsby and Ant Design Theme Customization

Question

how to connect and customize the default less variables of ant design inside a gatsby js app...? https://ant.design/docs/react/customize-theme#Ant-Design-Less-variables

Answer 1

Try https://www.npmjs.com/package/gatsby-plugin-less and https://github.com/bskimball/gatsby-plugin-antd

      {
        resolve: 'gatsby-plugin-less',
        options: {
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': primaryColor,
            'font-family': `Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif`,
          },
        },
      },
      {
        resolve: 'gatsby-plugin-antd',
        options: {
          style: true,
        },
      },