Sass
Next.jsは、パッケージをインストールした後、.scss
と.sass
の両方の拡張子でSassとの統合を組み込みでサポートしています。CSSモジュールと.module.scss
または.module.sass
拡張子を使用して、コンポーネントレベルの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;
}
pages/_app.js
import variables from '../styles/variables.module.scss'
export default function MyApp({ Component, pageProps }) {
return (
<Layout color={variables.primaryColor}>
<Component {...pageProps} />
</Layout>
)
}