shimar's blog

Next.jsでscssを使う

2020-02-28
nextjsscssreactjs

Next.jsに入門しました。Next.jsでアプリケーションを作る際に、スタイルをscssで書きたいときに、どうすればよいか調べた結果をまとめておきます。

@zeit/next-sassを使う

Next.jsの開発元のzeitが、sass(scss)を扱うプラグインをnpmパッケージとして公開していました。 それが、@zeit/next-sass です。

公式ドキュメントに沿ってやってみました。

インストール

npmかyarnでプロジェクトに追加します。
僕はもっぱらnpmを使っているので、

npm install --save @zeit/next-sass node-sass

でインストールしました。

設定

next-sassを使うには、Next.jsプロジェクトの設定ファイルであるnext.config.jsを編集します。

  • CSS moduleを使わない
  • CSS moudleを使う

で、設定が若干変わるようです。

CSS moduleを使わない

CSS moduleを使わない場合は、next.config.jsは↓のように書きます。

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  /* config options here */
})

CSS moduleを使う

CSS moduleを使う場合は、next.config.jsは↓のように書きます。

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  cssModules: true
})

使ってみる

いずれにしてもnext.config.jsで、withSass関数を呼んであげることで、scssが使えるようになるので、実際にscssでスタイルを書いてみます。

/path/to/project-root/styles/styles.scss というファイルを作って、

html {
  height: 100%;
  width: 100%;
}

としてみました。

そして、このスタイルをページ(/path/to/project-root/pages/index.js)で次のように引き込んでみました。

import '../styles/styles.scss';

export default function Index() {
  return (
    <div>
      <p>Hello Next.js</p>
    </div>
  );
}

結果、

devtools

のように、styles/styles.scssがページに適用されました。

これで、scssを使ったスタイルが定義できそうです！

©2016-2023 shimar