如何使用 Sass
Next.js 在安裝套件後，內建支援與 .scss 和 .sass 副檔名的 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。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
module.exports = nextConfig實作方式
您可以使用 implementation 屬性來指定要使用的 Sass 實作方式。預設情況下，Next.js 使用 sass 套件。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
module.exports = nextConfigSass 變數
Next.js 支援從 CSS 模組檔案匯出的 Sass 變數。
例如，使用匯出的 primaryColor Sass 變數：
$primary-color: #64ff00;
:export {
primaryColor: $primary-color;
}// 對應到根 `/` URL
import variables from './variables.module.scss'
export default function Page() {
return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}