Sass

安裝套件後，Next.js 內建支援與 Sass 整合，同時支援 .scss 和 .sass 副檔名。您可以透過 CSS 模組和 .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 模組檔案匯出的 Sass 變數。

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

app/variables.module.scss

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

app/page.js

// maps to root `/` URL
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

這有幫助嗎？