create-react-appでSassを使う手順

create-react-appでSass(.scss)を使う手順を調べた結果メモ。

以下、手順です。

  1. npm install sassでSassコンパイラーをインストールする
  2. プロジェクト内にある.cssファイルをすべて.scssに書き換える

たったこれだけでSassが使えるようになります。

自前でwebpackで設定する場合と比べると、めちゃくちゃ楽ちんですね。

 

ちなみにググってみると、npm install node-sassでSassコンパイラをインストールすると書いているブログが多いですが、今現在はnode-sassは非推奨らしいです。

  • Sassコンパイラーには、dart-sassnode-sass2種類があるらしいのですが、今現在(2021年5月)は、dart-sassの使用が推奨されているらしいです。(node-sassのページに書いてます)
  • dart-sassのパッケージ名はsassです

 

以下、仕組みについての補足です。

  • create-react-appは、webpacksass-loaderを使ってSassをバンドルする
  • sass-loaderは、dart-sassnode-sassの2つがインストールされている場合は、node-sassの方を優先する。(2021年5月現在、sass-loaderのREADME.mdに書いてます)
    • ただし、オプションによってはdart-sassの方を優先することもできる。(implementationというオプションを使えばいいらしい)

 

おわり

React
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。WEBエンジニア。

技術スタック:TypeScript/Next.js/Express/Docker/AWS

フォローする
フォローする

コメント

タイトルとURLをコピーしました