npm-scriptsでDart Sassのコンパイル環境構築
2021-02-19
目次
概要
今回は、
npm-scriptSass説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。
1. npm-scripts での環境構築
SassGulpしかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり
npm-scriptsという事で今回は
npm-scripts2. DartSass を使用したコンパイル
意外と知られていない事なのですが、厳密には
Sass基本的な記述方法は同じですが、
@import独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。
1. Ruby Sass
その名の通り、
RubySassこのタイプの場合コンパイルには
compassconfig.rb3 種類の
Sass昔から保守が続いているサイト・Web アプリ等ではよく見かけられます。
2. LibSass
こちらは
C++Sassnode-sass現在最も多く使用されています。
Gulpを使用している場合はgulp-sassになりますが、内部的にはnode-sassを使用しているみたいです
2021 年 2 月中旬の現在だと、記事等の情報も最も豊富で
node-sass但し、こちらも 2020 年 10 月に
Sass実際 の記事：https://sass-lang.com/blog/libsass-is-deprecated
3. Dart Sass
こちらも名前の通り
DartSassSass殆どこちらでしかされていない状態です。
しかし、現段階の週間インストール数では
node-sass特に日本での情報は多くありません。
という事で今回は、現段階では最新っぽい
npm-scriptsDart Sass前置き長くなってしまった…
環境構築
では、ここから実際に
Sassディレクトリ作成
まずはテスト用のディレクトリを作成して
package.json# テストディレクトリの作成（名前は任意）
mkdir node-sass-compiler
# 移動・package.jsonの作成
cd node-sass-compiler
npm initモジュールのインストール
次に使用するモジュールのインストールを行います。
| module | description | | ------ | ------------------------- | | sass | Dart 製の Sass コンパイラ |
# モジュールインストール
npm install sassまず、
Sasssasssass モジュールの使用方法
先ほど作成した
package.jsonscriptspackage.json
# --- 略 ---
"scripts": {
"sass": "sass src/scss/:dist/css/ --no-source-map --watch"
},
# --- 略 ---上記のスクリプトの解説はこんな感じです。
# sass [コンパイル前ファイル（ディレクトリ）]:[出力先ファイル（ディレクトリ）]
sass src/scss/:dist/css/使用しているオプションの
--no-source-map--watchコンパイルを実行してくれるものです。
オプション周りの詳細は下記公式を参考にしてください。
Dart Sassそれでは実際にスクリプトを実行してみましょう！
npm run sassこれで
/src/sass/sassscssコンパイルが行われ、
/dist/css/css単純なコンパイルのみであれば、めちゃくちゃ簡単…！
参考
Dart SassnpmDart SassDart SassJS API