Sass
Next.jsは、パッケージをインストールした後、.scss
および.sass
拡張子を使用してSassとの統合をサポートしています。CSS Modulesと.module.scss
または.module.sass
拡張子を介してコンポーネントレベルのSassを使用できます。
まず、sass
をインストールします:
Terminal
npm install --save-dev sass
Good to know:
Sassは、それぞれ独自の拡張子を持つ二つの異なる構文をサポートしています。
.scss
拡張子はSCSS構文の使用を要求します。 一方、.sass
拡張子はインデント構文 ("Sass")の使用を要求します。どちらを選ぶべきかわからない場合は、CSSのスーパーセットであり、インデント構文("Sass")を学ぶ必要のない
.scss
拡張子から始めてください。
Sassオプションのカスタマイズ
Sassオプションを設定したい場合は、next.config
でsassOptions
を使用します。
- TypeScript
- JavaScript
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
export default nextConfig
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
module.exports = nextConfig
実装
使用するSass実装を指定するためにimplementation
プロパティを使用できます。デフォルトでは、Next.jsはsass
パッケージを使用します。
- TypeScript
- JavaScript
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
export default nextConfig
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
module.exports = 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>
}