LibSass(node-sass)からDartSassに移行の手順

LibSass(node-sass)からDartSassに移行の手順

  • 2022-01-22  最終更新日:2022-01-22

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ)

Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しました。サイト上でも棺桶になってます。

LibSassは、C / C ++でのSassの実装であり、多くの異なる言語に簡単に統合できるように設計されていますが、(node-sassなど)いろいろあり結局LibSassは2020年10月に非推奨となり、今後は新機能の追加が行われないことが決定しています。サポートは行われるようですが移行したほうがよさそうです。@import機能は2022年にはサポート終了(@importはDartSassでは@useに置き換わる)

Dart SassはSassの主要な実装です。現在のデフォルトなので新しい機能を取得できます。インストールは簡単で、純粋なJavaScriptにコンパイルされるため、最新のWeb開発ワークフローに簡単に統合できます。


準備

まずnode-sassをアンインストールします。

$ npm remove node-sass

インストール

sassとsass-migratorをインストールします。sass-migratorはnode-sassなどの古い記述をDartSassで使えるように変換するツールです。

$ npm i -D sass sass-migrator

移行

マイグレーション、出力ファイルを選択するだけで紐付いているscssファイルが変換されます。他オプションがありますが詳しくは公式サイトでご確認ください。

$ sass-migrator --migrate-deps module ./src/sass/style.scss

移行した後はsassで作業すると思うのですが規則などが変わっているので公式サイト見ながら作業した方が良いかと思います。

参考になれば幸いです。


∞Tadashi Suyama∞

sass scss node-sass libsass dart-sass migration
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
Perlで500エラー!原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ
WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ
LibSass(node-sass)からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 熊野大社 昨年同様に大晦日の夜に出発しました。子供が大...

10 Jan 2022

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ