
Ruby SassからDart SassへSassの環境を移行させるまでの流れ
当メディアサイトでもSassのインストールにはRuby製のRuby Sassを使った方法を紹介していますが、Sassの公式サイトでは、Ruby Sassの開発が随分前に止まっており既に廃止されている状況とのこと。公式サイトにも下記のようにアナウンスされています。
“ Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. It's no longer supported, ..... ”基本的にはGulpでnode製のSassを使うことが多いのですが、ちょうど機会があったので、このタイミングでRuby Sassに代わって推奨されている「Dart Sass」へ移行させましたので、それまでの流れを残しておきたいと思います。 移行前はこのようにRuby Sassが使われていました。ここからDart Sassに移行していきます。
$ sass -v Ruby Sass 3.7.4まずは、Homebrew経由でDart Sassをグローバルにインストールしていきます。下記のコマンドを実行します。
$ brew install sass/sass/sassRuby Sassが使われている場合には、下記のようにエラーメッセージが出ます。内容としては、既にRuby Sassで使われていたSassの実行ファイルが存在していることが問題のようです。
Error: The `brew link` step did not complete successfully The formula built, but is not symlinked into /usr/local Could not symlink bin/sass Target /usr/local/bin/sass already exists. You may want to remove it: rm '/usr/local/bin/sass'そこで下記のコマンドによって、該当のSass実行ファイルに対してシンボリックリンクとして上書きします。このようにすることで、Dart Sassが使えるようになります。
$ brew link --overwrite sassシンボリックリンクを上書きしたら、実際にDart Sassに変わっているかを確認してみます。ちなみに、Dart Sassでは「-v」のコマンドオプションが使えないので下記のようにします。
$ sass --version 1.26.5バージョンが変わっており、Ruby SassからDart Sassへの移行が完了したことが確認できますね。もし、これで変わっていない場合には、「.bash_profile」にて直接、Dart Sassへの環境変数のパスを通してあげると使えるようになります。 【.bash_profile】
export PATH=/usr/local/Cellar/sass/1.26.5/bin:$PATH.bash_profileファイルの編集時には、下記のコマンドで編集内容を適用させることを忘れずに。
$ source ~/.bash_profile念の為、下記のコマンドでSassの実行ファイル参照先を調べて、Rubyでインストールしたものになっていないかどうか確認しておくといいですね。「/usr/local/Cellar/」にはHomebrewでインストールしたパッケージが入ります。
$ which sass /usr/local/Cellar/sass/1.26.5/bin/sassDart Sassの使い方ですが、Ruby Sassと同じように各コマンドやオプションが使用できますので、移行後もこれまで通り開発を進めることができます。
$ sass --watch before.scss after.cssRuby Sassはあまり使う機会もなく、長らくほったらかしにしておりましたが、ちょうどDart Sassに移行する機会があったので良かったです。Ruby Sassをお使いの方は忘れずに是非試してみてください。
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)