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に追加されることを確認してください。 または next.config.jsの修正 next.config.jsの先頭行で、「@zeit/next-sass」モジュールを読み込みます。当該モジュールは定数「withSass」格納してください。続いて、withSassメソッドをmodule.exportsに代入して、モジュール化しています。 CSS Modulesにする withSassメソッドにcssModules: trueを与えるとCSS Modulesが適用されます。CSS Modulesは、低レイヤーのUIにフォーカスしたアーキテクチャです。この概念の導入によりグローバル汚染防止に効果的です。styled-jsxも同様の考え方によるものといえるでしょう。しかし共通スタイルを複数コンポーネントに跨って適用したい場合には、使いません。 エラーが発生したら エラーが発生しましたか？私の環境では、つぎのエラーが発生しました。node-sassが環境に適用されていないとのことです。 エラー解消方法 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 上のシェルスクリプトを保存します。ファイル名は任意で結構。ファイルを、package.jsonがある階層に配置してください。用意が整ったら、シェルスクリプトを実行します。 まとめ Next.js環境でSassを使う方法をお伝えしてきました。共通スタイルにおいては、効率的な作業ができるのではないでしょうか。ただしReactは、コンポーネントベースの開発を勧めるライブラリであるため、各コンポーネントで読み込むなり、styled-jsx記述をするなりして、CSS Modules化を検討することも忘れないでください。