【NEXT.JS 系列】資產、後設資料與CSS 8

樣式的技巧

以下是一些可能有用的樣式提示。

使用 classnames 來切換 classes

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

請查看其文件以獲取更多詳細資訊，但這是基本用法：

• 假設您要建立一個接受 type 的 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}',
    // For the best performance and to avoid false positives,
    // be as specific as possible with your content configuration.
  ],
};

要了解有關自定義 PostCSS 配置的更多內容，請查看 PostCSS 的文件。

要輕鬆開始使用 Tailwind CSS，請查看我們的範例。

使用 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 文件。