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生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

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