react + antd + craco 自定義主題

很久沒寫 react 了，突然發現這個多變的世界多了一個叫做 craco 的東西，不知道是幹嘛的，但是antd官網推薦要是你想要自定義主題，例如要修改他們的less，可以用 craco。

創建 react 專案

我比較習慣用 yarn 建立專案，而且懶人都是使用腳手架ＸＤ

$ yarn create react-app my-app

 

安裝 antd

可以參考官網的說明。

$ yarn add antd

把 css 樣式在App.css引入

@import '~antd/dist/antd.css';

這時候你可以把一個按鈕放到App.js上面看看有沒有出線樣式囉！

import { Button } from "antd";
function App() {
  
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

---

安裝 craco

自定義主題的方式有很多種，但這邊我直接用官網推薦的，安裝 craco 的方式。

$ yarn add @craco/craco

把package.json的scrip指令改成用 craco 啟動

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

接著安裝 craco-less

$ yarn add craco-less

在根目錄新增一隻檔案craco.config.js

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

把App.css改副檔名成App.less，所以你在App.js引入的地方也要改成App.less

import "./App.less";

一開始我們有在App.less (原本的App.css) 檔案中引入 antd 樣式，在那邊也要把.css改成.less

// @import "~antd/dist/antd.css";
@import "~antd/dist/antd.less";

這時候重新啟動專案，就可以看到按鈕已經變色囉！

$ yarn start

---

同場加映

如果你不想把那些變數寫在config中，要獨立出來一個檔案，可以參考我的作法：

新增less資料夾，裡面放所有的.less檔案。

-src/
--less/
---main.less
---var.less

@import './var.less';

@primary-color: #1da57a;

@import "~antd/dist/antd.less";
@import "@/less/main";

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },
};