Sass

Next.js 在安裝套件後，即內建支援整合 Sass，同時支援 .scss 和 .sass 擴展名。您可以透過 CSS Modules 和 .module.scss 或 .module.sass 擴展名來使用元件層級的 Sass。

首先，安裝 sass

終端機

npm install --save-dev sass

小提示:

Sass 支援兩種不同的語法，每種語法都有自己的擴展名。.scss 擴展名要求您使用 SCSS 語法，而 .sass 擴展名則要求您使用縮排語法 ("Sass")。

如果您不確定該選擇哪一個，請從 .scss 擴展名開始，它是 CSS 的超集，並且不需要您學習縮排語法 ("Sass")。

自訂 Sass 選項

如果您想要設定您的 Sass 選項，請在 next.config 中使用 sassOptions。

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

實作

您可以使用 implementation 屬性來指定要使用的 Sass 實作。預設情況下，Next.js 使用 sass 套件。

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}
 
export default nextConfig

Sass 變數

Next.js 支援從 CSS Module 檔案匯出的 Sass 變數。

例如，使用匯出的 primaryColor Sass 變數

app/variables.module.scss

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

pages/_app.js

import variables from '../styles/variables.module.scss'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}