Dart-Sassをインストールしてみる

以前紹介した「scssをコンパイルしてみる」という記事でSCSSの記事を書きましたが、そこで使っている「node-scss（LibSass）」というライブラリがすでにサポート終了していたみたいでした。現在は「dart-scss」というのを使うと良いみたいなので、入れてみます。

新しいdart-sassは他のファイルを読み込む「@import」が廃止になって「@use」と「@forword」を使うようになったのが大きな違いみたいですね。

1. インストール

まずはnodeが入っているか確認します。

node -v

つぎにnpmが入っているかも確認します。

npm -v

両方とも入っていたら、次に初期化します。

npm init

色々聞いてくるので、全部「Enter」を押していきます。
これで「package.json」ができました。ここまでが事前準備みたいですね。

次に「sass」をインストールします。Dart-sassなんですけど、インストールするときには「sass」でいいみたいです。

npm install sass --save-dev

2. インストール確認

きちんと動作するか、サンプルファイルを使って確認してみます。まずはこんな感じでファイルを作ります。

/
|-dist/
|-src/
 |-app.scss

app.scssはこんな感じにします。

@use "sass:map";

html, body { 
  margin: 0;
  padding: 0;
}

コンパイルします。

npx sass src/app.scss dist/app.css --style compressed

これでsrcに「app.css」と「app.css.map」ができていればOKです。
ちなみに後ろの「–style compressed」は圧縮するというオプションです。

3. 設定

コンパイルのコマンドを簡略化するためにpackage.jsonを変更します。
scriptsの部分にbuildを追加します。

{
  "name": "hogehoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx sass src/app.scss dist/app.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.64.1"
  }
}

これを入れると「npm run build」でコンパイルができるようになります。
試してみたら無事できました。

今回は以上です！