Webの「css」を使用する場合は記述が楽な「Sass(.scss / .sass ファイル)」を使用すると便利です。
「Next.js」で「Sass」を使用して開発する場合、導入が簡単に出来ます。
導入までの手順をまとめます。
「Sass」の導入
以下のコマンドを実行して「Sass」をインストールします。
### yarn の場合
$ yarn add sass --dev
### npm の場合
$ npm install sass --save-dev次に「styles」に入っている「.css」ファイルの拡張子を「.scss」に変換します。
- globals.css -> globals.scss
また「.tsx」内でインポートしている箇所も同様に「.css」から「.scss」に変換する必要があります。
import '../styles/globals.css';import '../styles/globals.scss';設定が完了したらビルドが出来るか確認して、問題なくサーバーが立ち上がったら問題ありません。
$ yarn dev