Zenn
🐥

【SCSS】パーシャルファイルもコンパイルする方法（Windows10)

2022/04/11に公開
Scss
tech

環境

Windows10
コマンドプロンプト

前回の続きになってます。
まだ、「DartJS Sass Compiler and Sass Watcher拡張子導入方法」 を行っていない方はそちらから行って下さい。
今回の内容は前回からの続きからになります。

パーシャルファイルとは
簡単に言うと分割したSCSSファイルの事です。
headerはheaderのファイルに記述、mainはmainのファイルに記述など、分割して管理する事で後からの修正もしやすかったり、探す時も素早く探しに行けます。

  1. ディレクトリ構成
    test
    ├ css
    │ ├ style.css
    ├ sass
    │ ├ _header.scss ←パーシャルファイルをコンパイル
    │ └ style.scss
    └ index.html

※パーシャルファイルを作成するときは先頭に「＿」を追加します。
　また、style.scssに＠use　"パーシャルファイル名"　を記述します。
パーシャルファイル名は「＿」と.scssを省いた名前（header）のみ記述します。

  1. Node.jsをインストール
    Node.jsとは
    サーバー再度で動くjavascriptです。

直接公式サイトからNode.jsをインストール
https://nodejs.org/ja/

推奨版をインストールします。

3.Node.jsとnpmが正しくインストールされたかどうか確認
Node.jsバージョン

node -v  

v16.14.2

npm バージョン

npm -v  

6.14.12

公式のと同じだったらインストールされています。

  1. npmでsassプラグインをインストール
npm init -y

package.jsonが作成されます。

npm i -D sass

node_modulesが作成されます。

  1. dartsass.sassBinPath に node_modules/sass/sass.js(Windows)を設定する
    設定の検索バーから「dartsass.sassBinPath」を検索する
    Dartsass:Sass Bin Pathのフォームにnode_modules/sass/sass.jsを記述する

  2. パーシャルファイルをコンパイルする
    　 _header.scssファイルを右クリック一番下の
    　 Dartsass:Sass Watchをクリックします。

    これでstyle.cssにコンパイルされるはずです。

お疲れ様でした。
記述に誤りがありましたら、ご指摘宜しくお願い致します。

Discussion