［Vite］SCSS のインストール

公開日：2025-12-23
更新日：2025-12-23

1. 概要

プロジェクトで 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
}

＜前の記事

TypeScriptのプロジェクトの作成