npm-scriptsでsassをコンパイルする開発環境の構築方法について解説します。
この記事ではnode.js
・npm
がインストールされている前提で進めますので、まだインストールされていない方はおすすめのインストール方法を下記の記事で紹介しているので、参考にインストールを行なってください。
また、npm-scripts
について理解を深めたい方はこちらの記事で解説していますので、先に読んでおくことをお勧めします。
INDEX
はじめに(プロジェクトフォルダの準備)
今回のサンプルでは下記のディレクトリ構造で構築を進めていきます。
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.json
のscripts
にスクリプト(タスク)を登録し、必要なパッケージのインストールが必要になります。
以下のコマンドでパッケージをインストールし、package.json
に下記の通りscripts
に記載します。
また今回利用するパッケージは設定ファイル(configファイル)が必要になりますので、設定ファイルも一緒に作成します。
それぞれのスクリプトの作成方法については後半で解説しますので、詳しく理解したい方は「スクリプトの登録方法」もご覧ください。
①利用するパッケージのインストールと解説
以下のコマンドで今回利用する全てのパッケージをインストールします。
$ npm i -D autoprefixer npm-run-all postcss postcss-cli postcss-combine-media-query rimraf sass
パッケージ | 概要 |
---|---|
sass | DartSassを利用できるようになる |
rimraf | 指定のファイル・ディレクトリを削除する |
npm-run-all | 複数のスクリプトを実行する |
postcss | postCSSを利用できる |
postcss-cli | postCSSをコマンドから利用できるようにする |
autoprefixer | ベンダープレフィックスを自動で付与する |
postcss-combine-media-query | 同じブレイクポイントのメディアクエリを一つにまとめる |
package.json
のdevDependencies
に以下のようにインストールしたパッケージが記載されたら成功です。
{
"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.js
をpackage.json
と同じ階層に作成し、下記のコードを記載します。
module.exports = {
plugins: {
autoprefixer: {},
'postcss-combine-media-query': {},
},
};
さらに対応ブラウザのバージョンを指定するためにpackage.json
の一番最後に、以下のbrowserslist
を追加します。
{
"devDependencies": {
・・・
},
"browserslist": [
"last 2 versions, > 1%"
]
}
以上でSassの開発環境の作成が完了です。
④スクリプト(登録したタスク)の解説
それでは作成したスクリプト(タスク)について解説します。
スクリプト | 概要 |
---|---|
sass | sassのベースとなるスクリプト。ソースマップが生成されないで一度だけコンパイルされる。 |
dev:sass | 開発用のスクリプト。scssが保存される度にソースマップ付きでcssにコンパイルされる。 |
min:sass | cssの圧縮用のスクリプト。ミニファイされた状態でコンパイルされる。 |
postcss | ベンダープレフィックスの付与と、複数のメディアクエリを一つにまとめる。 |
clean:css.map | 公開時に不要となる「css.map」を削除する。 |
build:sass | 公開用のスクリプト。min:sass →postcss →clean: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.json
のscripts
に記載します。
{
"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のオプションはその他にもありますので、興味がある方は公式のページから確認してください。
2. rimraf
ファイルやフォルダを削除するパッケージです。
今回は開発時に利用しているcssのソースマップを、本番掲載する際に削除するために使用します。
以下の順にpackage.json
のscripts
に記載します。
{
"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.json
のscripts
に記載します。
{
"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の書き方は以下の公式サイトからご確認ください。
4. npm-run-all
作成したタスクを一つのコマンドで複数実行するためのパッケージです。
今回は本番用ファイルを生成するbuild:sass
スクリプトを実行する際に、以下の3つのタスクを同時に実行しています。
- ミニファイした状態でcssにコンパイル
- コンパイルしたcssにpostcss(ベンダープレフィックスの付与)を適用
- 開発用の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の開発環境の完成です。
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていただけますと幸いです。