※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。


CreateReactAppでSassのモジュール機能を使うとすごく便利

web開発 create-react-app モジュール sass webデザイン scss スタイルシート

投稿日:2021年3月13日

このエントリーをはてなブックマークに追加
CreateReactAppにはスタイルシートのモジュール機能がついています。この機能を使うことで、地獄のようなCSS命名規則を捨てることができます。

はじめに

Sassモジュールについて

create-react-appで作成したアプリケーションにはスタイルシートのモジュール機能がついています。一応言っておきますが、@importや@useを使ったモジュールとは違うので注意!
このモジュール機能を使用すると、CSSの命名規則(OOCSS、BEM、SMACSS、FLOCSS)の地獄から解放されます。この命名規則で悩んでいる方はぜひ使って見ましょう!

環境

この記事は以下の環境で確認されました。

  • npm version 6.14.4
  • node version 10.19.0

実践

実際にReactアプリケーションでSassモジュールを使ってみましょう。

まずはサンプルプロジェクトを作成します。

ターミナル
$ mkdir sample
$ cd sample
$ npm init
$ npx create-react-app app

Sassモジュールを使用するにはnode-sassのパッケージが必要になります。プロジェクトにインストールしておきましょう。

ターミナル
$ cd app
$ npm install --save node-sass

これだけでSassでモジュール機能が使うことができます。早速Sassモジュールファイルを作成しましょう。モジュールファイルは~~~.module.scssまたは~~~.module.sassという名前にします。scssにするかsassにするかは使いたい構文によって使い分けてください。

自分はscssの構文が好きなので、App.module.scssというファイルを作ってみます。

App.module.scss
.area {
  text-align: center;
}

使用する側のjsではファイルをimportすることで、モジュール内に定義されたCSSセレクタを使用できます。

./App.js
import styles from "./App.module.scss";

function App() {
  return <div className={styles.area}></div>;
}

export default App;

Sassモジュールの良いところはコンパイル後のコードにあります。

実際に開発用サーバーを起動させてコードを見てみましょう。

ターミナル
$ npm start

ChromeのDevToolsなどを使ってコードを見てみましょう。

以下のようなコードが生成されています。

<div class="App_area__2S3N0"></div>

Sassモジュールはコンパイル時に

{Sassモジュール名}_{セレクタ名}_{アプリ内で一意なランダム値}

というクラス名に変換されます。つまり各モジュールで同じセレクタ名を使用しても、コンパイル後には絶対にセレクタ名が被ることが無いのです(サイコー!!)。

それぞれのモジュール内では以下のようにシンプルなセレクタ名を使うことができるため、命名規則が非常にシンプルになります。

.area { // コンポーネントの外枠。marginやpaddingなどで位置を調整
}

.content { // コンポーネントのメイン部分。具体的なデザインを定義。
}

OOCSS、BEM、SMACSS、FLOCSSとはおさらばだ!

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント
    
検索