Sassの導入と、node-sass実行時に「このシステムではスクリプトの実行が無効になっているため」エラーの場合の対処方法【Windows】

CSSのメタ言語「Sass」

Sass(サース)は、CSSを拡張した言語で、ネスト構造で記述できたり、変数をもちいた記述を可能にしています。

インストールと設定

Sassのインストールには、Node.jsが必須です。

Node.jsのインストール

Node.jsをダウンロードし、インストールします。

https://nodejs.org/ja/

推奨版をダウンロードし、インストーラーを実行します。

PCを再起動でコマンドラインから実行が可能になります。

コマンドラインからnode.jsのバージョン、パッケージ管理npmのバージョンを確認します。

> node -v
> npm -v

node-sassのインストール

sassを使えるようにnode-sassをインストールします。

> npm install -g node-sass

バージョン確認をします。

> node-sass -v

Windowsの環境によっては、下記エラーが発生しスクリプトの実行ができない場合があります。

「このシステムではスクリプトの実行が無効になっているため、ファイル node-sass.ps1 を読み込むことができません。」

その場合、powershell コマンドのオプションを付与して実行します。

> powershell -ExecutionPolicy RemoteSigned node-sass -v

または、実行ポリシーを恒久的に変更する場合は、コマンドプロンプトを管理者権限で起動し、下記コマンドを実行します。

>PowerShell Set-ExecutionPolicy RemoteSigned

Gulpのインストール

Gulpをインストールします。

> npm install --global gulp-cli

バージョン確認をします。

> gulp -v

Sassコンパイル実行

Sassのコンパイルは、ワーキングディレクトリでgulp watch を実行することで完了します。

> gulp watch

これで、SCSSファイルの変更時点でCSSへコンパイルが実行されます。

コメントを残す

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

CAPTCHA