react + antd + craco 自定義主題

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

創建 react 專案

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

$ 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.jsonscrip指令改成用 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/"),
    },
  },
};

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。