npm-scriptsを使ったSCSSやSASSのコンパイル方法

今回は、Sass（SCSSやSASS）を、npm-scriptsを使ってコンパイルする方法を紹介します。

npm-scriptsを使ってSassをコンパイルするには

まず、Web開発に慣れている方で、すでにnode.jsおよびsassのインストールが済んでおり、ただSassをコンパイルするためのnpm-scriptsの書き方が分からない、という場合は、package.jsonファイルのscriptsフィールドに、次のように記述してください。

{
  "scripts": {
    "build:sass": "sass --no-source-map src/sass/:dist/css/",
    "watch:sass": "sass --no-source-map --watch src/sass/:dist/css/"
  }
}

実際にSassをコンパイルするには、次のコマンドを実行します。

$ npm run build:sass
$ npm run watch:sass

ここからは、npm-scriptsを使ってSassをコンパイルできるようにするまでの流れを、詳しく見ていきます。

npm-scriptsを使うための準備

npm-scriptsでSassをコンパイルするための準備として、お使いのコンピュータに、node.jsをインストールしておく必要があります。

• Windows: WindowsにNode.jsをインストールする方法
• Mac: MacにNode.jsをインストールする方法

上記のリンクから、ご自身のコンピュータに合った方法で、node.jsのインストールを済ませておいてください。

Sassのインストール

つづいて、Sassのインストールをしていきます。
まず、次のコマンドでディレクトリを作り、そこへ移動します。

$ mkdir npm-test
$ cd npm-test

次のコマンドでpackage.jsonファイルを作ります。

$ npm init -y

では、Sassをインストールしましょう。

$ npm install sass --save-dev
$ npm list
npm-test@1.0.0 xxxx\npm-test
`-- sass@1.55.0

Sass（sassやscss）のファイルを用意する

つづいて、sassまたはscssファイルを用意します。
まずは、Sassのファイルを保存しておくためのディレクトリを作成しましょう。

$ mkdir -p src/sass/

作成したsrc/sassディレクトリに、SCSSを使うのであれば拡張子がscss、SASSを使うのならば拡張子がsassのファイルを作ります。
今回はサンプルとして、btn.scss（btn.sass）を作ります。

もしVimを使っているのでしたら、次のコマンドでSassのファイルを作ることができます。

SCSSの場合

$ vim src/sass/btn.scss

SASSの場合

$ vim src/sass/btn.sass

btn.scssの内容は、次のようにしました。

src/sass/btn.scss

.btn {
    cursor: pointer;
    text-align: center;
    &.btn-primary {
        color: #fff;
        background: #1da1f2;
        border: none;
    }
}

もしSASSを使うのでしたら、次のようになります。

src/sass/btn.sass

.btn
    cursor: pointer
    text-align: center
    &.btn-primary
        color: #fff
        background: #1da1f2
        border: none

npxコマンドを使って、Sass（sassやscss）をCSSにコンパイル

npm-scriptsを使ってSassをコンパイルするには、そのコマンドをpackage.jsonのscriptsフィールドに登録しておく必要があります。

となると、登録する前に、そのコマンドでちゃんと動作するかどうかをチェックしておきたいですよね。

そんなときは、npxコマンドを使います。

では、実際にnpxコマンドを使って、Sassをコンパイルしてみたいと思います。
以下のコマンドを実行しましょう。

$ npx sass src/sass/:dist/css/

これはsrc/sassディレクトリにあるSassのファイルをコンパイルして、dist/cssディレクトリに保存するものです。
書き方としては、次のようになります。

$ npx sass [sassファイルがあるディレクトリ]:[cssを保存するディレクトリ]

コンパイルしたCSSは、次のようになります。

dist/css/btn.css

.btn {
  cursor: pointer;
  text-align: center;
}
.btn.btn-primary {
  color: #fff;
  background: #1da1f2;
  border: none;
}

/*# sourceMappingURL=btn.css.map */

Sassのよく使うオプションについて

Sassには、さまざまなオプションがありますが、次のふたつのオプションがよく使われると思うので、覚えておきましょう。

ソースマップ（.mapファイル）を生成しないようにする

上記の方法でSassをコンパイルすると、拡張子が.mapとなったソースマップが生成されます。
これでブラウザの開発者ツールから、そのスタイルがどのSassファイルに書かれているか、というのを知ることができます。

しかし、これが必要ないと感じることも多いと思います。
そんなときは、--no-source-mapオプションを使います。

$ npx sass --no-source-map src/sass/:dist/css/

また、このオプションを使うことで、CSSの最後に記述されていたsourceMappingURLも、出力されなくなります。

ファイルの変更を監視する

ファイルを変更したとき、毎回コンパイルのコマンドを実行するのは大変です。
そんなときは、ファイルの変更を監視して、自動的にコンパイルされるようにしておくと便利です。

下のコマンドは、src/sassディレクトリにあるファイルを監視して、変更があったときに自動でコンパイルしてくれるものです。

$ npx sass --watch src/sass/:dist/css/

scriptsフィールドにコマンドを登録する

package.jsonのscriptsフィールドにコマンドを登録しておくことで、コマンドの実行がさらに便利になります。

package.json

{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:sass": "sass --no-source-map src/sass/:dist/css/",
    "watch:sass": "sass --no-source-map --watch src/sass/:dist/css/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.55.0"
  }
}

今回は、7、8行目で、ふたつのコマンドを登録しました。
SassをCSSにコンパイルするものと、Sassを監視してCSSにコンパイルするものです。

これらのコマンドは、次のようにすれば実行することができます。

$ npm run build:sass
$ npm run watch:sass

ディレクトリやオプションを含めて、あらかじめpackage.jsonに登録してあるので、たったこれだけでコンパイルや監視を行なうことができます。

まとめ

今回はnpm-scriptsを使って、SassをCSSにコンパイルする方法を紹介しました。

npxコマンドでは、毎回オプションやディレクトリを入力する必要がありますが、あらかじめnpm-scriptsに登録しておくことで、かんたんにコマンドを実行できるようになります。

• Tweet
• Facebook
• はてブ
• Pocket