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

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

参考

Sass: Syntactically Awesome Style Sheets
Syntactically Awesome Style Sheets
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに...
Vue + dart-sass + Webpack でCSSモジュールを使うため設定 - Qiita
cssModules のオプション記述位置が違った 公式に書かれた設定だけだと css modules が実現できなかったので調べたところ、Vue Loader v15 から色々変わった模様。 Vueのルール部分ではなく、CSS...

やったこと

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;

おわり。