はじめに
こんにちは！
運営者のたらおと申します。
CSSの開発において、手動でSassやScssファイルをコンパイルすることは非常に面倒な作業ですよね。
ですが、node-sassを使えばScssファイルの簡単に自動コンパイル環境を構築することができます。
この記事では、まずは基本となる手動でのコンパイル方法を解説し、次にnode-sassを使ってScssファイルを自動的にコンパイルする方法を詳しく解説します。
手順は簡単で、node-sassの導入、コマンドの設定まで、わかりやすく説明しています。
また、node-sassを導入することで得られるメリットについても解説しています。
CSSの開発を効率化し、作業時間を大幅に短縮することができるため、Web開発者にとっては必見の内容となっています。
この記事を読むことで、node-sassを使った自動コンパイル環境の構築方法を簡単にマスターし、開発効率を飛躍的に向上させることができます。
✔️ 記事を見るメリット
- SassやScssファイルをCSSファイルに手動でコンパイルする方法がわかる
- SassやScssファイルの自動コンパイル環境を構築する方法がわかる
- node-sassのオプションの設定方法がわかる
✔️ 筆者の経験
- 東京都内で現役Webエンジニアとして勤務
- Web領域での副業で月10万円程度
- Web系自社サービス企業で複数のプロジェクトの立ち上げを経験
SassやScssファイルの手動でのコンパイル方法
そもそもコンパイルとは何か？というところから説明します。
コンパイルとは、要するに「変換」です。
SassやScssを使うと、CSSをより効率よく簡潔に書くことができますが、SassやScssのコードをそのまま使うことはできません。
CSSに一度変換する必要があるのです。
この場合、基本的には以下のコマンドを打つことでCSSファイルに変換を行うことができます。
sass sassファイル 出力先ファイル
これで、変換先のCSSファイルをHTMLで読み込めばCSSを反映させることができます。
例えば、「main.scss」ファイルを「style.css」にコンパイルする場合は以下のようになります。
sass main.scss style.css
これで手動でのコンパイルができます。
ただし、これでいちいちコンパイルするたびにコマンドを打つのは面倒ですよね。。
そこで、今回はnode-sassというパッケージを使って簡単に自動コンパイルする環境を構築していきます。
手順は非常に簡単なので、特に初心者の方におすすめしたいです！
SassやScssファイルの自動コンパイル環境の構築方法
まずは、下記のコマンドでpackage.jsonファイルを生成します。
npm init -y
-yは、聞かれる質問に全て「yes」と答えるという意味です。
次に、node-sassをインストールします。
npm install node-sass
package.jsonを確認してください。
以下のように、node-sassがインストールされていれば成功です。
"dependencies": {
"node-sass": "^8.0.0"
}
次は、node-sassによって自動的にコンパイルするように設定していきます。
package.jsonに以下のように、追記してください。
"scripts": {
"compile:scss": "node-sass main.scss css/style.css --watch"
},
これで自動コンパイル環境が出来上がります。
コードの意味は、以下のようになります。
"scripts": {
"compile:scss": "node-sass scssファイル 出力先のcssファイル --watch"
},
--watchはコードを常に監視するという意味で、SassやScssファイルに何か変更を加えると自動的にコンパイルしてくれるようになります。
これで自動コンパイル環境ができました。
お疲れ様です😊
次のセクションは少し深掘りをして、今回の--watchのようなオプションが他にどのようなものがあるのかを説明していきます。
node-sassオプションの設定方法
node-sassのオプション一覧を以下に示します。
--watchについては既に説明済みのため、割愛します。
--output-styleには、次の4つが指定できます。
- nested・・・ネストした状態でコンパイルされる
- expanded・・・標準的なcssの形式でコンパイルされる
- compact・・・無駄な行を省いてコンパイルされる
- compressed・・・CSSが圧縮されてコンパイルされる
特に本番環境などでは、できるかぎりcssファイルのサイズを小さくしたいので、compressedを指定するような使われ方をしています。
--source-mapにtrueを指定すると、ソースマップを一緒に出力してくれます。
ソースマップとは何か？という話なのですが、ソースマップとは、ブラウザなどにCSSが生成元のSassファイルにどのように対応するかを伝える役割があります。
ソースマップがないことによって、Chromeなどのブラウザのコンソールに警告が出てしまうようなことがあります。ただし、これは警告が出るのみで、何かエラーで表示ができないなどの不具合は特にないので安心していいです。
ソースマップを出力するメリットは、以下の通りです。
- ブラウザなどでの警告が消える
- CSSファイルを圧縮したときに、CSSコードがかなり読みづらくなるが、ソースマップがあればコードを人の目で確認しやすくなる
- 変換前と変換後の対応付けが一目でわかる
最後に、これらのオプションを交えたサンプルコードを下記に示します。
"scripts": {
"compile:scss": "node-sass main.scss css/style.css --output-style compressed --source-map true --watch"
},
オプションは状況に応じて使い分けていきましょう！😆
最後に
この記事では、node-sassを使った自動コンパイル環境の構築方法を詳しく解説しました。
手順は簡単で、node-sassの導入から、コマンドの設定まで、できる限りわかりやすく説明してきました。
node-sassを導入することで、手動でSassやScssファイルをコンパイルする手間を省き、CSSの開発作業の効率化が図れます。
是非、この記事を参考にして、開発効率を向上させることができるようになってください。
ではでは✨
コメント