create-react-appの環境でSCSSを使えるようにする

の続きで、今度はSCSS(Sass)を使えるようにしてみる。

以下の公式ページに従う。

$ npm install sass

git diff package.json を見ると sass が dependencies に増えただけ。

diff --git a/package.json b/package.json
index f0040f2..1d380db 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.63.6",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

suzuki-navi

mv src/App.css src/App.scss

src/App.tsx にあるimport文も変更。

index a53698a..5bedb7f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './App.scss';

 function App() {
   return (

npm install sass 実行後に npm run start を再起動する必要があったが、これだけでSCSSが動いた。 App.scss を編集して入れ子構造で書き直しても動いた。

suzuki-navi

ちなみに、入れ子構造のCSSファイルの拡張子を .scss から .css に戻しても動いた。 package.json や package-lock.json を戻して npm run start を再起動しても動いた。なぜ？

suzuki-navi

入れ子構造のCSSのまま拡張子を .css にしたとき（package.json に sass が入っていても同じ）

拡張子を .scss にしたとき

ブラウザ自体が入れ子構造のCSSに対応するようになっていたらしい。

このスクラップは2023/07/07にクローズされました