［Vite］SCSS のインストール

プロジェクトで SCSS を使用できるようにします。

SCSS は、SASS の書き方の 1 つです。

npm install -D sass

test.scss

.test {
    .red {
        color:#ff0000;
    }
}

HTML

<div class="test">
  <div class="red">TEST</div>
</div>

同じ階層の style.css からインポートする場合

@import './test.scss';

同じ階層の TypeScript からインポートする場合

import './test.scss'

SCSS をインポートする場合は、「./」で始まる相対パスで指定します。
この相対パスは、import を書いたファイルからの相対パスになります。

また、上記 SCSS をビルドすると、次のような CSS が出力されます。

.test .red {
  color:#f00
}