【React】CSS Moduleとdart-sassを使う

この記事は最新更新日から、4年以上経過しています。

少し古いReactでSASSを使いたかったのですが、node-sassが非推奨らしいのでdart-sassを使うことにしました。

参考
やったこと

参考

Sass: Syntactically Awesome Style Sheets

Syntactically Awesome Style Sheets

sass-loader で dart-sass を使う - Qiita

モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。ちなみに node-s...

Vue + dart-sass + Webpack でCSSモジュールを使うため設定 - Qiita

アップデート 2021.12.11 fibersが非推奨になったので該当箇所消しました。 2021.3.7 現在、cssModulesがここに書いた設定だと使えなくなっています。やり方がわかりましたら追記します。 cssModules のオ...

やったこと

SASSと関連パッケージのインストール

package.jsonがある場所で下記コマンドを打ちます。

npm install --save-dev fibers sass sass-loader

sass: dart-sassのnpmのパッケージ名がsassらしい
fibers: dart-sassのcssへのコンパイル速度が上がるらしい
sass-loader: sassを読み込むために使うらしい

webpackの設定

webpack.config.jsの設定

  module: {
    rules: [
　　　/* 省略 */
　　　{
      test: /\.scss$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader',
        // css Modules を使うために必要な設定
        modules: true,
      }, {
        loader: 'sass-loader',
        // dart-sass を使うのに必要な設定
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
        },
      }]
    }
　　　/* 省略 */
　　]
  }

clientでの書き方

.scssファイル側

.App{
  text-align: center;
  .red{
    color: red;
  }
}

Component側

import React from 'react';
import style from './App.scss';/* scssをそのまま読み込む */

function App() {
  return (
    /* {}でくくってクラス名を設定（CSS Moduleの効果でブラウザではユニークなクラス名になる） */
    <div className={style.App}>
      <span className={style.red}>nanika</span>
    </div>
  );
}

export default App;

おわり。