---

---

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

投稿日：2021年3月13日

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

---

はじめに

Sassモジュールについて

環境

---

実践

$ mkdir sample
$ cd sample
$ npm init
$ npx create-react-app app

$ cd app
$ npm install --save node-sass

.area {
  text-align: center;
}

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

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

export default App;

$ npm start

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

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

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

---

---

---