スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

node-sassを使ってWindowsでsassをコンパイルする環境を構築する

update : 2019/01/06

node-sassを使ってWindows上にsassをコンパイルする環境を構築します。

昨今、sassをコンパイルする環境は様々です。
中には環境構築が複雑でタスクランナーなどがエラーで走らなかったりと、そもそも効率悪くなってない?と疑問に思うこともありますが、今回はシンプルに「scssファイルをコンパイルする」ことだけに焦点を当てたいと思います。

導入した環境は以下の通りです。

Windows 10 Home 64bit
Node.js 10.14.1
node-sass 4.7.2

Node.jsをインストールする

まずはnode-sassを動作させるために必要なNode.jsをインストールします。
Node.js

安定版の「LTS」バージョンと最新版の「Current」バージョンがあると思いますが、安定版を選択しダウンロードします。
ダウンロードしたらファイルを実行してインストールします。
オプションなど選択する必要は特にないので、デフォルトのままインストールを進めて問題ないでしょう。

インストール後にコマンドプロンプトを起動した、以下のコマンドが実行できればNode.jsのインストール成功です。

> node -v

node-sassをインストールする

次にnode-sassをインストールします。
インストールにはnpm(Node Package Manager)コマンドを使います。

> npm install -g node-sass

以下のコマンドが実行できればnode-sassのインストール成功です。

> node-sass -v

scssファイルをコンパイルする

今回はsassファイルの記述方法は割愛しますが、例えばstyle.scssファイルをコンパイルする場合、以下のように実行します。

> node-sass style.scss style.css

「–output-style compressed」のオプション指定で圧縮したファイルを出力することができます。

> node-sass style.scss style.min.css --output-style compressed

「scss」フォルダにまとめられたsassファイルを、cssファイルの出力先を指定してまとめてコンパイルすることができます。

> node-sass -r ../scss/ -o ../css/

cssファイルが変更保存されたことを監視して、都度コンパイルを実行することもできます。

> node-sass style.scss style.css -w
B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives