靜態資源、詮釋資料 和 CSS

套用樣式的技巧

以下是一些對你有幫助的套用樣式技巧。

使用 classnames 函式庫來切換類別

classnames 是一個簡單的函式庫，讓你可以輕鬆地切換類別名稱，使用 npm install classnames 或 yarn add classnames 便可安裝它。

若想瞭解更多細節請參閱 文件，以下為基本的使用方式：

• 假設你想要建立一個 Alert 元件，它接收 type 屬性，其值可以是 'success' 或 'error'。
• 如果你希望 'success' 的文字顏色為綠色，而 'error' 則為紅色。

你可以寫一個 CSS 模組（例如 alert.module.css）來達成，內容如下：

.success {
  color: green;
}
.error {
  color: red;
}

並使用 classnames，內容如下：

import styles from './alert.module.css';
import cn from 'classnames';

export default function Alert({ children, type }) {
  return (
    <div
      className={cn({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

自訂 PostCSS 設定

在預設情況下，無需做任何設定，Next.js 便會使用 PostCSS 編譯 CSS。

要自訂 PostCSS 設定，你可以在最上層目錄建立一個名為 postcss.config.js 的檔案。如果你使用的是像 Tailwind CSS 這樣的函式庫，這將會很有幫助。

以下是新增 Tailwind CSS 的步驟，首先安裝套件：

npm install -D tailwindcss autoprefixer postcss

接著建立一個 postcss.config.js：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

我們也建議你在 tailwind.config.js 中指定 content 選項來 設定內容來源：

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // 為了達到最佳效能並避免誤判，
    // 請盡可能地設定精確的內容來源。
  ],
};

使用 Sass

在預設情況下，Next.js 允許你使用 .scss 和 .sass 副檔名來匯入 Sass。你可以透過 CSS 模組 和 .module.scss 或 .module.sass 副檔名來使用元件階層的 Sass。

在你使用 Next.js 內建的 Sass 支援之前，請確認是否已安裝 sass:

npm install -D sass

本課程就到這了！

若想瞭解更多關於 Next.js 內建的 CSS 支援和 CSS 模組資訊，請參閱 CSS 文件。

← 返回上一頁 前往下一課 →