ラボ > CSS:Sass、dart sass

Ubuntu dart-sassを使う

「dart-sass」ってのを使うように言われているらしいので使ってみる

作成日:2022-12-22, 更新日:2022-12-23

基本

▼私の環境
WIN+Docker+Ubuntuでlaravelを使うための作業メモ

前回、ruby-sassをインストしていたので削除

Ubuntuでsassのコンパイル(ruby-sass)

▼aptでパッケージの削除

$ sudo apt remove {パッケージ名}

▼aptでパッケージの完全削除

$ sudo apt remove --purge {パッケージ名}

aptで「ruby-sass」削除

$ sudo apt remove --purge ruby-sass

dart-sassのインストール手順

  1. tar.gzファイルのDL
  2. 展開
  3. PATHを通す
  4. 確認

tar.gzファイルのDL

▼tarの取得(※「dart-sass-1.57.1-linux-x64.tar.gz」をDL: 2022-12-22)
github: sass / dart-sass

展開

「opt」に置け的なコトをどっかで見たよう気もしたけど自分のディレクトリに置いておく

tar.gzファイルを自分のディレクトリに置く

  • 自分のディレクトリ: /home/recatnap
  • tar.gzファイルのPATH: /home/recatnap/dart-sass-1.57.1-linux-x64.tar.gz

tarコマンド

▼自分のディレクトリ(/home/recatnap)にカレントを移して実行

$ tar -xf dart-sass-1.57.1-linux-x64.tar.gz

→「/home/recatnap/dart-sass」が出来る
→「dart-sass-1.57.1-linux-x64.tar.gz」は好きなタイミングで削除

PATHを通す

Ubuntuを起動するたびにPATHを通すのは面倒なので設定する

▼「.profile」をviで開く

$ vi ~/.profile

▼「.profile」の最後に追加

PATH="$PATH:/home/recatnap/dart-sass"

▼「.profile」の再読込み

$ source ~/.profile

※Ubuntu再起動でもOK

確認

ruby-sassでは「:」だったトコが「 (空白)」に変わっている

▼「public/assets/css/layout.scss」から「public/assets/css/layout.css」を作成

$ sass public/assets/css/layout.scss public/assets/css/layout.css

関連項目