Sass

Next.js 內建支援在安裝套件後整合 Sass，可使用 .scss 和 .sass 兩種副檔名。您可以透過 CSS 模組和 .module.scss 或 .module.sass 副檔名來使用元件層級的 Sass。

首先，安裝 sass:

Terminal

npm install --save-dev sass

小知識:

Sass 支援兩種不同的語法，各自對應不同的副檔名。 .scss 副檔名需要使用 SCSS 語法，而 .sass 副檔名則需要使用縮排語法 ("Sass")。

如果不確定該選擇哪一種，建議從 .scss 副檔名開始，因為它是 CSS 的超集，無需額外學習縮排語法 ("Sass")。

自訂 Sass 選項

若要設定 Sass 編譯器，請在 next.config.js 中使用 sassOptions。

next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass 變數

Next.js 支援從 CSS 模組檔案匯出的 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>
  )
}

自訂 Sass 選項

Sass 變數

On this page