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

scss パーシャルファイルもコンパイルする方法

こんにちは。

新年度がスタートしましたね。

不安や緊張、楽しみ気持ちが入り混じる時期だとは思いますが、目標に向かって頑張りましょう！

環境

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）のみ記述します。

2. 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が作成されます。

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

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

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

お疲れ様でした。

何か間違いありましたら、ご指摘宜しくお願い致します。