Sassの使用方法
Next.jsには、パッケージをインストールした後で .scss
と .sass
拡張子の両方を使用してSassを統合するための組み込みサポートがあります。コンポーネントレベルのSassはCSSモジュールと .module.scss
または .module.sass
拡張子を介して使用できます。
まず、sass
をインストールします:
Terminal
npm install --save-dev sass
補足:
Sassは2つの異なる構文をサポートしており、それぞれ独自の拡張子があります。
.scss
拡張子を使用する場合はSCSS構文を使用する必要があり、.sass
拡張子を使用する場合はインデント構文(「Sass」)を使用する必要があります。どちらを選べばよいか迷った場合は、CSSのスーパーセットであり、インデント構文(「Sass」)を学ぶ必要がない
.scss
拡張子から始めるとよいでしょう。
Sassオプションのカスタマイズ
Sassオプションを設定したい場合は、next.config
でsassOptions
を使用します。
next.config.ts
TypeScript
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
export default nextConfig
実装
implementation
プロパティを使用して、使用するSass実装を指定できます。デフォルトでは、Next.jsはsass
パッケージを使用します。
next.config.ts
TypeScript
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
// ルート `/` URLにマッピングされます
import variables from './variables.module.scss'
export default function Page() {
return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}