今日やったこと

• 「モダンJavaScriptの基本から始める React実践の教科書」 P126〜132
  • 5-1 Inline Styles
  • 5-2 CSS Modules

学習メモ

インラインスタイルだけでアプリを作るのは難しいので、以降で解説するスタイリング方法のいずれかを使っていくことになる

CSS Modules

node-sassのインストール

yarn add node-sass@4.14.1

※ 最新バージョン（7.0.0）のnode-sassを入れたら互換性がないというエラーが出たため、バージョンを指定した
参考： https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

• 拡張子は [ファイル名].module.scss
• scssファイルをimportして className属性で定義したクラス名を指定する

CssModules.jsx

import classes from "../scss/CssModules.module.scss";

export const CssModules = () => {
    return (
        <div className={classes.container}>
            <p className={classes.title}>CSS Modulesです</p>
            <button className={classes.button}>ボタン</button>
        </div>
    );
}

CssModules.module.scss

.container {
	// …省略
}
.title {
	// …省略
}
.button {
	// …省略
}

所感

Node.js のバージョンを最新の安定版（ v16.13.1 ） にしていたら
node-sass v4.14.1 が使えなかったので、 Node.jsのバージョンを v12.16.1 に下げました。

次は Next.js に標準で組み込まれている Styled JSX について学びます。