Next.jsでSassモジュールを使えるようにしたい？その手続き、私がお手伝いしましょう。

Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。

コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。

そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。

それが、このエントリーの動機です。あなたも同様のことでお困りなら、Next.js環境にSassモジュールを追加する方法をご覧になって、ぜひトライしてみてください。

必要なモジュール

Next.js環境にSassを導入するには、つぎの２つのモジュールが必要です。

• @zeit/next-sass
• node-sass

対象の環境にインストールします。コマンド実行後は、package.jsonに追加されることを確認してください。

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

または

yarn add @zeit/next-sass node-sass

next.config.jsの修正

next.config.jsの先頭行で、「@zeit/next-sass」モジュールを読み込みます。当該モジュールは定数「withSass」格納してください。続いて、withSassメソッドをmodule.exportsに代入して、モジュール化しています。

const withSass = require('@zeit/next-sass');
module.exports = withSass();

CSS Modulesにする

withSassメソッドにcssModules: trueを与えるとCSS Modulesが適用されます。CSS Modulesは、低レイヤーのUIにフォーカスしたアーキテクチャです。この概念の導入によりグローバル汚染防止に効果的です。styled-jsxも同様の考え方によるものといえるでしょう。しかし共通スタイルを複数コンポーネントに跨って適用したい場合には、使いません。

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

エラーが発生したら

エラーが発生しましたか？私の環境では、つぎのエラーが発生しました。node-sassが環境に適用されていないとのことです。

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (69)

エラー解消方法

node-sassのGitHubリポジトリにissuesが投稿されていました。

@aleclarson Thanks, it worked for me for macOS and electron 1.6.12. I’ve improved the script a bit to automate it:

GitHub

#!/bin/bash
set -e
ARCH="x64"
TARGET=$(node -e "console.log(require('./package.json').devDependencies.electron.match(/\d+\.\d+.\d+/)[0])")
PLATFORM=$(node -e "console.log(process.platform)")
cd node_modules/node-sass/
# Build for Electron for current version
node-gyp rebuild --target=$TARGET --arch=$ARCH --dist-url=https://atom.io/download/electron
# Create vendor directory
VENDOR="vendor/$PLATFORM-$ARCH-69"
mkdir -p $VENDOR
cp build/Release/binding.node $VENDOR
cd ../../
# Clean up
rm -rf build

上のシェルスクリプトを保存します。ファイル名は任意で結構。ファイルを、package.jsonがある階層に配置してください。用意が整ったら、シェルスクリプトを実行します。

sh [ファイル名].sh

まとめ

Next.js環境でSassを使う方法をお伝えしてきました。共通スタイルにおいては、効率的な作業ができるのではないでしょうか。ただしReactは、コンポーネントベースの開発を勧めるライブラリであるため、各コンポーネントで読み込むなり、styled-jsx記述をするなりして、CSS Modules化を検討することも忘れないでください。