Gatsby.jsでAnt DesignのThemeをいじる時にうまくいかなかった話

どうも。

最近、自分のポートフォリオサイトを作るためにGatsby.js+Typescript+Sassでちょこちょこやっているのですが、その時発生した問題とその解決方法を書いてこうと思います。

Gatsbyのstarterは

github.com

を使用しました

問題

UIはAnt Designでやってこーってことで

これを入れて

github.com

Themeをいじりたかったので

こちらの記事を

qiita.com

参考にしながらgatsby-config.jsを編集し、試しにボタンを出してみると

<Button type="primary">Primary</Button>

全然antdじゃないやつ出てきた！

っていう問題

解決方法

stackoverflowにあった😅

stackoverflow.com

なのでこれを参考に

yarn add babel-plugin-import less less-loader gatsby-plugin-less

で必要なものを入れ、gatsby-config.jsのgatsby-plugin-lessの部分を以下のように編集

module.exports = {
  siteMetadata: {
    name: `Hello Typescript World!`,
    tagline: `Gatsby + SASS + Typescript = 💪`
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-tslint`,
    {
      resolve: "gatsby-plugin-less",
      options: {
        javascriptEnabled: true,
        modifyVars: {
          "primary-color": "#FAAD13",
          "layout-body-background": "#BEC8C8"
        }
      }
    }
  ]
};

さらにgatsby-node.jsを作成し、以下のように編集

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

package.jsonは以下のような状態です

{
  "name": "gatsby-starter-typescript-sass",
  "description": "Gatsby typescript sass starter",
  "license": "MIT",
  "version": "1.1.1",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "@babel/core": "^7.1.2",
    "antd": "^3.11.2",
    "gatsby": "^2.0.40",
    "gatsby-plugin-antd": "^2.0.2",
    "gatsby-plugin-less": "^2.0.8",
    "gatsby-plugin-sass": "^2.0.3",
    "gatsby-plugin-typescript": "^2.0.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1"
  },
  "devDependencies": {
    "gatsby-plugin-tslint": "^0.0.1",
    "tslint": "^5.11.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^3.6.0"
  }
}

そしてgatsby developするとボタンは

ちゃんとantdになり、themeも変更できました🎉