macOS Catalina に CSSフレームワーク Compass をインストールしようとしたところ、 想像以上に手間取ってしまいました。 解決方法について日本語での情報がなかったため、まとめて記事として投稿することにしました。 <h2 id="h98229beb66">Compassとは</h2>Compass は CSSフレームワークです。 SCSSと併用することで利用可能で、ベンダープレフィックスの自動付与、 CSSスプライトの自動作成など便利な機能がたくさん実装されています。 <a href="http://compass-style.org/" target="_blank" rel="noopener noreferrer">Compass Home | Compass Documentation</a> 2009年に作られたフレームワークであり、CSS3が普及し始めた頃にはよく使われていたようですが、 時代が進み、ブラウザの進化・より高機能な代替ソフトが開発された結果、 利用される機会がどんどん減り、2016年に開発が停止したという過去があります。 <a href="https://tech.pepabo.com/2018/03/15/bye-bye-compass/" target="_blank" rel="noopener noreferrer">Compass の送別会 - ペパボテックブログ</a> <h2 id="h705f30e492">検証環境</h2>以下の環境で検証をおこないました。<pre><code>macOS　Catalina 10.15.7</code></pre> <h2 id="h04f8f4ecae">発生した問題</h2>Compass は gem形式 で提供されているため、Ruby を使用します。 macOS ビルトインの Ruby では gem のアップデートやインストールに失敗してしまいました。 公式サイトのインストール手順ページに沿って作業を進めました。 <a href="http://compass-style.org/install/" target="_blank" rel="noopener noreferrer">Install the Compass Stylesheet Authoring Framework | Compass Documentation</a> まずは gemコマンド で Compass のインストールを試みます。<pre><code>gem install compass</code></pre> 以下のようなエラー文が出力されました。<pre><code>ERROR:&nbsp; While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.</code></pre> エラー文的にパーミションの問題であると判断したため、 sudo をつけてコマンドを実行してみました。<pre><code>sudo gem install compass</code></pre> 今度は別のエラーによりインストールが完了しませんでした。<pre><code>ERROR: Error installing compass:
ERROR: Failed to build gem native extension.</code></pre> <h2 id="had0b1b94af">解決方法</h2>手詰まり状態となったため、Googleで解決方法について調査したところ、 StackOverflowに解決方法が紹介されていました。 <a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a> ビルトインの ruby を使用していることが原因なので、 rbenv 経由の ruby を使用してこの問題を回避します。 作業内容としては、Homebrew経由 で ruby をインストールしてパスを通し、 その後 rbenv をインストールし、rbenv を経由した ruby で gem のインストールを行います。 直接的な問題解決ではありませんが、Compass の使用が目的であるため、 あまり時間をかけるべき作業ではないと判断し、StackOverflowの手法に従いました。 <h3 id="h13341b39a0">rbenvとは</h3>rubyのバージョン管理ができるソフトウェアです。 node.js 用に開発された nodenv など言語ごとに存在しています。 <h3 id="h8676c207ae">作業手順</h3>1から順に実行してください。<pre><code>1. brewパッケージのアップデート
brew update

2. ruby を homebrew でインストール
brew install ruby

# bash を使用している場合
echo 'export PATH=/usr/local/Cellar/ruby/(インストールされたバージョンを入力)/bin:$PATH' &gt;&gt; ~/.bash_profile
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

3. rbenv と ruby-build を homebrew でインストール
brew install rbenv ruby-build

# bash を使用している場合
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.bash_profile
echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.bash_profile 
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

4. rbenv でインストール可能な ruby のバージョンをリストアップ
rbenv install -l

5. ruby 2.4.1 をインストール
rbenv install 2.4.1

# 特定のディレクトリで使用する ruby のバージョンを指定
rbenv local 2.4.1
# システム全体で使用する ruby のバージョンを指定
rbenv global 2.4.1

6. rbenv にインストールした ruby を認識させる
rbenv rehash</code></pre> rbenv を経由した ruby では gem のアップデートやインストールが問題なく実行できました。 Compass をインストールしてみます。<pre><code>1. gem のアップデート
gem update --system

2. conpass をインストール 
gem install compass</code></pre> インストールも正常に完了したため、Compassを使用してSCSSのコンパイルを実行してみます。 プロジェクトのルートディレクトリに <code>config.rb</code> を作成し、以下のように記述します。<pre><code>http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded 
relative_assets = true
line_comments = false</code></pre> SCSSファイルに以下の文を記述します。<pre><code>@import 'compass/css3/';</code></pre> ターミナルで以下のコマンドを実行します。<pre><code>compass w</code></pre> これでSCSSファイルが更新された際にコンパイルが行われるようになりました。

<ul><li><a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a></li></ul>

カテゴリーが「Sass」の記事

カテゴリ