StackBlitz上でscssファイルを読み込めるようにする方法

Udemyのreact講座に取り組んでいる際、Stackblitzだとscssファイルがうまく読み込めない事象に出くわしたため、備忘として解決するまでの手順を整理しました。

※Stackblitz…ブラウザ上でReactの動作を確認できるハイパー優れた代物です
https://stackblitz.com/

発生事象

下記ソースコードを記述しnpm run devを実行したところエラー発生。

main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import { CssModules } from './components/CssModules';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <CssModules />
  </StrictMode>
);

CssModules.jsx

import classes from './CssModules.module.scss';

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p>-CSS Modules-</p>
      <button>FIGHT!!</button>
    </div>
  );
};

CssModule.module.scss

.container {
  border: solid 2px #008b8b;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

※エラー文：Preprocessor dependency "sass-embedded" not found. Did you install it? Try npm install -D sass-embedded.

sassのdependencyがないためエラーとなっている（らしい）
エラー文の通りコマンドを打ってみたもののうまくいかなかったので別な方法を検証

解決方法

stackblitz上でsassをコンパイルできる環境を用意する

①Ctrl ＋ Cでnpmを止める

②Terminalに下記コマンドを入力

npm install --save-dev sass

package.jsonのdevDependenciesにsassが入っていることを確認

③package.jsonのscript配下に読み込むscssファイルを記述

"scripts": {
    "sass": "sass src/components/CssModules.module.scss src/components/CssModules.module.css",
  },

④sassをコンパイルする

npm run sass

scssの変換ファイルが作成される

⑤npm run dev コマンドを実行
scssファイルが反映されている！！

解決にあたり下記記事を参考にさせていただきました<(_ _)>
https://zumilog.org/sass_dev-enviroment