Sassをコンパイルする方法【環境構築】

2024年9月13日2024年9月21日

私が当ブログでWeb制作について解説する時にはSassのコードを記載しています。しかし、このSassは初期設定の状態では書いても反映されません。

この記事では、人気のエディターであるVSCodeで拡張機能を使って、Sassをコンパイルする方法（Sassを読み込む方法）について解説します。

拡張機能のLive Sass Compilerをインストール

まず初めに、今回使用する拡張機能のLive Sass Compilerをインストールします。
上のリンクからインストールしていただくこともできますし、VSCodeの拡張機能から検索してインストールすることも可能です。

VSCodeを起動したら左側の拡張機能のタブをクリックして検索ワードの部分に「Live Sass Compiler」と入力して検索します。私は既にインストールしてあるため、少し表示が変わっていますが、インストールがまだの方は「インストール」と書かれたボタンが出てくると思いますので、そちらをクリックしてインストールしてください。

フォルダ構成

拡張機能のインストールができましたら、フォルダ構成について解説します。

他にフォルダの構成方法はあると思うのですが、一例として普段私が利用しているフォルダ構成をご紹介します。

まず、HTMLを書き込む「index.html」ファイルを作成し、そのファイルと同水準に「cssフォルダ」と「sassフォルダ」を作成してください。cssフォルダの中に「style.css」ファイルを作成し、sassフォルダの中に「style.scss」を作成してください。

イメージとしては
・index.html
・css
　L style.css
・sass
　 L style.scss

このようなフォルダ構成になるように作成してください。

HTMLファイルで読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sassコンパイル</title>

    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
</body>
</html>

HTMLの<head>タグ内にCSSファイルを読み込むための記述を上記のように書いてください

ここで、「style.scss」は読み込まなくていいの？と思った方がいるかもしれませんが、HTMLファイルで読み込むのは「style.css」のみで大丈夫です。

「style.scss」に書いたものがコンパイルされて「style.css」に反映され、この「style.css」を「index.html」で読み込むという流れになります。