【2024年】npm-scriptsで作るsassのコンパイル開発環境

/

※本記事にはプロモーションが含まれています。

npm-scriptsでsassをコンパイルする開発環境の構築方法について解説します。

この記事ではnode.jsnpmがインストールされている前提で進めますので、まだインストールされていない方はおすすめのインストール方法を下記の記事で紹介しているので、参考にインストールを行なってください。

また、npm-scriptsについて理解を深めたい方はこちらの記事で解説していますので、先に読んでおくことをお勧めします。

はじめに(プロジェクトフォルダの準備)

今回のサンプルでは下記のディレクトリ構造で構築を進めていきます。

npm-sass
└src/
  └scss/
    └style.scss
└dist/
  └css/
    └style.css
└package.json

VScodeなどのエディターに任意のディレクトリを開き、ターミナルを起動します。
その後下記のコマンドでフォルダの作成カレントディレクトリの移動を行なってください。

$ mkdir npm-sass
$ cd npm-sass

プロジェクトフォルダに移動したら下記のコマンドでpackage.jsonを作成します。

$ npm init -y

完成形の解説

プロジェクトの準備が整ったら、始めに完成したpackage.jsonについて解説します。
npm-scriptsを利用するにはpackage.jsonscriptsにスクリプト(タスク)を登録し、必要なパッケージのインストールが必要になります。

以下のコマンドでパッケージをインストールし、package.jsonに下記の通りscriptsに記載します。

また今回利用するパッケージは設定ファイル(configファイル)が必要になりますので、設定ファイルも一緒に作成します。

それぞれのスクリプトの作成方法については後半で解説しますので、詳しく理解したい方は「スクリプトの登録方法」もご覧ください。

①利用するパッケージのインストールと解説

以下のコマンドで今回利用する全てのパッケージをインストールします。

$ npm i -D autoprefixer npm-run-all postcss postcss-cli postcss-combine-media-query rimraf sass
パッケージ概要
sassDartSassを利用できるようになる
rimraf指定のファイル・ディレクトリを削除する
npm-run-all複数のスクリプトを実行する
postcsspostCSSを利用できる
postcss-clipostCSSをコマンドから利用できるようにする
autoprefixerベンダープレフィックスを自動で付与する
postcss-combine-media-query同じブレイクポイントのメディアクエリを一つにまとめる

package.jsondevDependenciesに以下のようにインストールしたパッケージが記載されたら成功です。

{
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.28",
    "postcss-cli": "^10.1.0",
    "postcss-combine-media-query": "^1.0.1",
    "rimraf": "^5.0.2",
    "sass": "^1.66.1"
  }
}

②package.jsonにスクリプト(タスク)を登録する

{
  "scripts": {
    "sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map",
    "dev:sass": "npm run sass -- --watch --source-map",
    "min:sass": "npm run sass -- --style=compressed",
    "postcss": "postcss dist/css/style.css -o dist/css/style.css",
    "clean:css.map": "rimraf dist/css/*.map",
    "build:sass": "run-s min:sass postcss clean:css.map"
  },
}

③設定ファイルを作成する

postcssを利用するためにpostcss.config.jspackage.jsonと同じ階層に作成し、下記のコードを記載します。

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-combine-media-query': {},
  },
};

さらに対応ブラウザのバージョンを指定するためにpackage.jsonの一番最後に、以下のbrowserslistを追加します。

{
  "devDependencies": {
    ・・・
  },
   "browserslist": [
    "last 2 versions, > 1%"
  ]
}

以上でSassの開発環境の作成が完了です。

④スクリプト(登録したタスク)の解説

それでは作成したスクリプト(タスク)について解説します。

スクリプト概要
sasssassのベースとなるスクリプト。ソースマップが生成されないで一度だけコンパイルされる。
dev:sass開発用のスクリプト。scssが保存される度にソースマップ付きでcssにコンパイルされる。
min:sasscssの圧縮用のスクリプト。ミニファイされた状態でコンパイルされる。
postcssベンダープレフィックスの付与と、複数のメディアクエリを一つにまとめる。
clean:css.map公開時に不要となる「css.map」を削除する。
build:sass公開用のスクリプト。min:sasspostcssclean:css.mapの順番で複数の処理を実行する。

登録したコマンドを実行する際は下記のようにnpm run <スクリプト名>で実行します。

$ npm run dev:sass

src/scss/style.scssに下記のサンプルコードを記載し、スクリプト(タスク)をコマンドで実行して、実際に挙動を確認してみましょう。

ul {
  display: flex;

  @media screen and (max-width: 767px) {
     display: block;
  }

  & li {
    width: 200px;
    transition: 0.3s all;

    @media screen and (max-width: 767px) {
      width: 300px;
    }
  }
}

npm run dev:sass--watchオプションを使用しているので、別のコマンドを入力する際はターミナルでcontrol + Cで停止してから別のコマンドを使用してください。

スクリプトの登録方法の解説

1. sass

DartSassを利用するためのパッケージです。
以下の順にpackage.jsonscriptsに記載します。

{
  "scripts": {
    // "『①スクリプト名』": "『②使用するパッケージ』 『③コンパイル元』:『④コンパイル後』 『⑤オプション』",
    "sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map"
  },
}

対象ファイルの指定方法はファイル指定とフォルダ指定の両方が可能です。
以下はそれぞれの指定方法の

{
  "scripts": {
  // ①ファイル名指定(指定したファイルのみを指定したファイル名でコンパイルする)
  "sass": "sass src/scss/style.scss:dist/css/styel.min.css",
  // ②フォルダ指定(指定のフォルダ内全てが階層構造とファイル名を維持したままコンパイルされる)
  "sass": "sass src/scss/:dist/css/"
  },
}

さらにオプションを指定して、より使いやすくカスタマイズします。

{
  "scripts": {
    "sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map",
    "dev:sass": "sass src/scss/style.scss:dist/css/style.css --watch --source-map",
    "min:sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map --style=compressed"
  },
}
sassのオプション概要
--no-source-mapコンパイルする際にソースマップを生成しない
--source-mapコンパイルする際にソースマップを生成する
(デフォルトではソースマップは有効になっている)
--style=compressedコンパイルする際にcssをminifyする
--watchファイルの更新を監視して、scssファイルの保存時に自動でcssにコンパイルする

タスクを追加する際はベースとなるタスクを登録し、そのタスクに上書きしてオプションを追加することもできます。
見た目もスッキリして、ディレクトリ構造やファイル名が変更になった際にも、ベースとなるタスクのみを修正すれば良いので便利です。
下記のように「--」をつなげて登録します。

{
  "scripts": {
    "sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map",
    "dev:sass": "npm run sass -- --watch --source-map",
    "min:sass": "npm run sass -- --style=compressed"
  },
}

sassのオプションはその他にもありますので、興味がある方は公式のページから確認してください。

sassのオプション

2. rimraf

ファイルやフォルダを削除するパッケージです。

今回は開発時に利用しているcssのソースマップを、本番掲載する際に削除するために使用します。
以下の順にpackage.jsonscriptsに記載します。

{
  "scripts": {
    // "『①スクリプト名』": "『②使用するパッケージ』 『③削除対象』",
    "clean:css.map": "rimraf dist/css/*.map",
  },
}

rimrafも対象ファイルの指定方法はファイル指定フォルダ指定の両方が可能です。

{
  "scripts": {
  // ①ファイル名指定(指定のファイルのみを削除。「*」.mapを使用することで拡張子を指定して削除することも可能)
  "clean:css.map": "rimraf dist/css/style.css.map",
  "clean:css.map": "rimraf dist/css/*.map",
  // ②フォルダ指定(指定のフォルダごと削除)
  "clean:css.map": "rimraf dist/css/",
  },
}

3. postCSS

sassのパッケージだけでは利用できない機能を利用するためのパッケージです。

今回はcssにベンダープレフィックスの自動追加と、読み込み速度を上げるために重複しているメディアクエリを一つにまとめる機能を利用しています。

またpostCSSは利用する際に設定ファイル(config)も必要になります。
以下の順にpackage.jsonscriptsに記載します。

{
  "scripts": {
    // "『①スクリプト名』": "『②使用するパッケージ』 『③変換前』 -o" 『④変換後』,
    "postcss": "postcss dist/css/style.css -o dist/css/style.css",
  },
}

またpostCSSも対象の指定方法はファイル指定フォルダ指定の両方が可能です。

ディレクトリ指定する際はファイル指定の-oをディレクトリの-dに変更します。

{
  "scripts": {
    // フォルダ指定
    "postcss": "postcss dist/css/ -d dist/css/",
  },
}

次に設定ファイル(config)を作成します。

package.jsonと同じ階層にpostcss.config.jsを作成し、下記のコードを記載します。(今回使用しているパッケージを記載しています。)

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-combine-media-query': {},
  },
};

最後に対応ブラウザを指定するため、package.jsonの一番最後に以下のようにbrowserslistを追加します。

{
  "devDependencies": {
    ・・・
  },
   "browserslist": [
     "last 2 versions, > 1%"
  ]
}

今回は以下の設定で追加しています。

browserlist概要
1%全体のユーザーシェアのうち1%以上のブラウザをサポートする
last 2 versions各ブラウザの最新2バージョンをサポートする

browserslistの書き方は以下の公式サイトからご確認ください。

browserslist

4. npm-run-all

作成したタスクを一つのコマンドで複数実行するためのパッケージです。
今回は本番用ファイルを生成するbuild:sassスクリプトを実行する際に、以下の3つのタスクを同時に実行しています。

  1. ミニファイした状態でcssにコンパイル
  2. コンパイルしたcssにpostcss(ベンダープレフィックスの付与)を適用
  3. 開発用のcss.mapの削除
{
  "scripts": {
    "sass": "sass src/scss/style.scss:dist/css/style.css --no-source-map",
    "min:sass": "npm run sass -- --style=compressed",
    "postcss": "postcss dist/css/style.css -o dist/css/style.css",
    "clean:css.map": "rimraf dist/css/*.map",
    // "『①スクリプト名』": "『②使用するパッケージとオプション』 『③実行するスクリプト(半角開けて複数登録)』 ",
    "build:sass": "run-s min:sass postcss clean:css.map",
  },
}

npm-run-allのオプションには並列実行と順番に実行の二つがあります。

npm-run-allのオプション概要
--parallel (-p)スクリプトを並列に実行
--sequential (-s) スクリプトを順番に実行

今回はmin:sassの後にpostcssを実行させたかったため、-s順番に実行のオプションを使用しています。
また、npm-run-allはパッケージ名を省略してrun-s/run-pオプションと記載することができます。

おわり

以上でnpm-scriptsで作るSassの開発環境の完成です。

プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていただけますと幸いです。

おすすめの書籍