41
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【node-sass】 導入方法

Last updated at Posted at 2019-10-09

##node-sassの導入方法
まずnode-sassを使用するにはNode.jsがインストールされている必要があります。

homebrew等を使ってNode.jsのバージョン管理を行う方法もありますが、Sassのコンパイルのみでしか利用しない場合は公式サイトからファイルをダウンロードしてインストールするのが簡単です。

Node.js公式サイト

インストールが完了したら、Windowsの場合はコマンドプロンプト、Macの場合はターミナルを起動して、下記のコマンドを入力してください。

node -v

v10.16.3のように表示されたらインストール成功です。
(数字は上記と同じでなくても問題ありません)

##プロジェクト内にnode-modulesをインストール
まずはpackage.jsonを作成する必要があります。
プロジェクト内でnpmを配置するディレクトリにcdコマンドで移動します。

移動したら下記のコマンドを入力

npm init

入力すると下記の画面になると思います

package name: (パッケージの名前)
version:(1.0.0) でバージョンを生成するかどうか、問題なければEnter  
description: 概要説明 (例 sample Landing page) 無記載でもよければEnter 
entry point:(index.js) そのままエンターを押すと初期表示ファイルをindex.jsファイルのままにする
test command: 無記載でEnterを押すとテストコマンドを設定せず進める
git repository: Githubに保存するリポジトリ情報を登録するかどうか
keywords: npm公開時に使用されるkeywords設定 無記載Enterで設定せず進める
author: 作者情報 (例 Accio
licens: defaultのISCで問題なければそのままEnter

入力し終えると最後に上記の情報でいいか聞かれるので問題なければyes

上記の作業を終えるとディレクトリ内にpackage.jsonが作成されている。

作成されてるのを確認したら

npm install node-sass --save-dev

これでフォルダ内にnode_moduleが作成される。

##次のステップ
ディレクトリ内にmkdir sassでフォルダを作る
cd sassで移動し touch main.scss

ここまで出来たらpackage.jsonのscriptsを変更する

"scripts": {
   "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

*自身のディレクトリ構造に合わせ変更してください

この状態でnpm run compile:sassを実行するとコンパイルされます。
-w(watch)オプションをつけているので変更を加えた場合はその都度コンパイルが実行されます。

-wオプションをつけないと変更の度にコマンドを実行しないといけないため少々めんどくさいです。
終了するときは^Cです。

##まとめ
導入の流れは以上となります。
間違い、他にいい方法がありましたら教えていただけると助かります。

この記事が少しでもお役に立てれば幸いです。

41
46
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?