Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Next.js14の開発環境構築手順 step03 CSS Modules + Sassとstylelintを設定する

制作 nextjs css css_in_js

はじめに

Next.js14の開発環境構築手順 step03 をやっていこうと思います。

以前 Next.js 13 でやったものを再検討しながらメモしていきます。

参考: Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する - Motomichi Works Blog

Zero-runtime CSS in JS を何か使おうかと思いましたが、色々検討した結果 CSS Modules 使うことにしました。

技術選定するにあたって考えたこと

CSS周りの技術選定するにあたって以下のようなことを考えました。

  1. 業務で長期的に運用することを意識して、バージョンアップやパッケージの置き換えがしやすい構成にしておきたい。
    • Next.jsにデフォルトで組み込まれている機能をできるだけ使う
      • 依存するパッケージをできるだけ増やさない
      • Next.jsのトランスパイラとしてSWCがデフォルトになったので、オプトアウトしてまでBabelを使わないようにしたい
    • CSSやSCSSに近い構文で書けるようにしたい
  2. 上記の「1」は考慮しつつ開発の利便性は損なわないようにしたい
    • stylelintが使えるようにする
    • CSSを書くときに関数や変数を使えるようにする

Next.jsのデフォルトのhomeページを一旦更地にする

まず app/page.tsx を以下のように変更しました。

export default function Home() {
  return <div>home</div>;
}

Homeページで使用していた不要なファイルを削除

app/page.tsx で使用していた以下のファイルは不要になったので削除します。

  • public/next.svg
  • public/vercel.svg
rm public/next.svg \
  public/vercel.svg

Sassをインストールする

以下のコマンドを実行します。

npm install --save-dev sass

app/page.module.cssの拡張子を変更する

app/page.module.css の拡張子を変更します。

mv app/page.module.css app/page.module.scss

app/page.module.scssの編集

以下の通り変更します。

.main {
  background-color: #ffdddd;
}

Homeページにスタイルを適用してみる

app/page.tsx を以下のように変更します。

import styles from './page.module.scss';

export default function Home() {
  return <div className={styles.main}>home</div>;
}

app/globals.cssの拡張子を変更する

app/globals.cssの拡張子を変更します。

mv app/globals.css app/globals.scss

app/layout.tsxを編集する

app/layout.tsx 内の

import "./globals.css";

となっている箇所の拡張子も以下のようにscssに変更します。

import "./globals.scss";

app/globals.scssの編集

以下の通り変更します。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  background-color: #ddffdd;
}

全てのscssファイルで共通利用する変数ファイルを作成する

ディレクトリを作成します。

mkdir app/_sassHelpers

ファイルを作成します。

touch app/_sassHelpers/index.scss

以下の通り記述します。

$red: #ffdddd;
$green: #ddffdd;

next.config.mjsにsassOptionsの設定を追加する

以下の通りsassOptionsの設定を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    prependData: '@import "_sassHelpers/index.scss";',
  },
};

export default nextConfig;

変数を適用してみる

app/globals.scssを以下の通り変更します。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  background-color: $green;
}

app/page.module.scssを以下の通り変更します。

.main {
  background-color: $red;
}

stylelintをインストールする

以下のコマンドを実行します。

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recess-order

インストールしたパッケージの選定にあたって調べたこと、選定基準を以下に書いておきます。

.stylelintrc.cjsを作成

ファイルを作成します。

touch .stylelintrc.cjs

以下の通り記述します。

module.exports = {
  extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
  plugins: ['stylelint-order'],
};

stylelintを実行してみる

以下のコマンドを実行します。

npx stylelint "**/*.scss"

以下の結果が出力されました。

app/_sassHelpers/index.scss
  1:7  ✖  Expected "#ffdddd" to be "#fdd"  color-hex-length
  2:9  ✖  Expected "#ddffdd" to be "#dfd"  color-hex-length

✖ 2 problems (2 errors, 0 warnings)
  2 errors potentially fixable with the "--fix" option.

.stylelintrc.cjsの編集

好みですが、カラーコードを3文字で書くのを禁止したいのでルールを変更します。

以下の通りrulesを追加しました。

module.exports = {
  extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
  plugins: ['stylelint-order'],
  rules: {
    'color-hex-length': 'long',
  },
};

stylelintをもう一度実行してみる

以下のコマンドを実行します。

npx stylelint "**/*.scss"

stylelintが構文のエラーを検出しなくなりました。

package.jsonのscriptsにstylelintとstylelint:fixを定義する

package.json の scripts に以下の行を追記します。

    "stylelint": "stylelint --ignore-path .gitignore './app/**/*.{css,scss}'",
    "stylelint:fix": "stylelint --fix --ignore-path .gitignore './app/**/*.{css,scss}'",

VSCode の extentions をインストールする

VSCodeのextentionは似たようなのがあったりするので、私が使用しているものの identifier を備忘録としてメモしておきます。

Stylelint

identifier: stylelint.vscode-stylelint 参考リンク: Stylelint - Visual Studio Marketplace

プロジェクトの VSCode の設定を追加する

.vscode/extensions.jsonの編集

{
  "recommendations": [
    "dbaeumer.vscode-eslint", // eslint
    "emmanuelbeziat.vscode-great-icons", // iconを変更
    "esbenp.prettier-vscode", // prettier
    "stylelint.vscode-stylelint", // stylelint
  ]
}

.vscode/settings.jsonの編集

以下のような感じで stylelint.validate と editor.codeActionsOnSave の設定を追加すると、ファイル保存時にstylelintが自動整形してくれると思います。

{
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}

適宜、他の設定と組み合わせてください。

今回はここまでにしておきます。

続き