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

CSS 樣式

現在讓我們談談 CSS 樣式。

如您所見，我們的索引頁面（http://localhost:3000）已經有了一些樣式。 如果您查看 pages/index.js，您應該會看到如下程式碼：

<style jsx>{`
  …
`}</style>

此頁面使用了一個名為 styled-jsx 的函式庫。 它是一個“CSS-in-JS”函式庫—它允許您在 React 元件中編寫 CSS，並且 CSS 樣式將被限定（其他元件不會受到影響）。

Next.js 內建了對 styled-jsx 的支援，但您也可以使用其他流行的 CSS-in-JS 函式庫，例如 styled-components 或 emotion。

編寫和匯入 CSS

Next.js 內建了對 CSS 和 Sass 的支援，允許您匯入 .css 和 .scss 文件。

還支援使用流行的 CSS 函式庫，例如 Tailwind CSS。

在接下來的教學中，我們將討論如何在 Next.js 中編寫和匯入 CSS 文件。 我們還將討論 Next.js 對 CSS 模組和 Sass 的內建支援。 讓我們繼續深入吧！