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-sassnext.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
// 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
@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化を検討することも忘れないでください。
