初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

Switch language

当Webサイトのコンテンツ内にはアフィリエイト広告、Googleアドセンス広告が含まれます。
広告主によって不適切な広告が表示されていることに気付いた方は、お手数でございますが該当の広告の「×」を押していただき、「この広告の表示を停止」し所定の流れに従ってください。

Mac で sass-autocompile を使う方法

> Web初心者必見 > 開発環境整備

— 追記 @2023年10月26日 ——————————–

2022年12月15日にAtomエディタがサービス終了してしまいました。。。

Atomを引き続き使用することはできるかもしれませんが、今後のアップデートは無くなり、プラグインのアップデートもサポートも無くなりました。

Atomの後釜になるエディタソフトとして、私はVSCode(Visual Studio Code)をおすすめしています。

VSCodeでSCSSファイルのコンパイル方法は他の記事に任せて、本WebサイトではVSCodeでSCSSファイルのコンパイル先がcssフォルダにうまく設定できない時の解決策を紹介しています。

VSCodeに乗り換えてSCSSファイルのコンパイルに困ったときはぜひ参考にしてください。

— END 追記 @2023年10月26日 ——————————–





まずはnode.jsをインストールしましょう。

https://nodejs.org/ja/

上記ページの「推奨版」をダウンロード&インストールしてください。

ここまでは全く問題なくできると思うんですが、多くの方が次のステップである node-sass のインストールができず苦労されているようで、私もその一人でした。

Macで node-sass をインストールする方法を様々な記事で見ましたが、 ターミナル(例の黒い画面) で訳の分からないコードを入力してはエラーが出て心が折れそうでした。。。

それでも、やっとこさ良い方法が見つかりました!!!

node-sassがインストールできずに心が折れそうになっているMacユーザーを救うべく、この記事を書きましたので是非最後までご覧ください!!

では、いきましょう!!

お好みの場所にお好みのフォルダを作る

例)

/Users/(ユーザーネーム)/Desktop/work/tool/node-sass

↑私はこんな感じで「node-sass」というフォルダを作りました。

node-sass をインストールする場所を変更する

ターミナルを起動して下記のコマンドを実行してください。

npm config set prefix '(上記で作成したフォルダのパス)'

例)

npm config set prefix '/Users/(ユーザーネーム)/Desktop/work/tool/node-sass'

上記手順の場所変更がちゃんとできているか確認

ターミナルで下記のコマンドを実行してみてください。

npm config get prefix

これで先ほど作成したフォルダのパスが表示されれば問題ありません。

いよいよ node-sass をインストールする

ターミナルで下記コマンドを実行すると node-sass のインストールが始まります。

npm install -g node-sass

パスワードを聞かれるので、Mac を起動した時やロックを解除する時のパスワードを入力して Enter を押しましょう。

パスワードの入力中は何文字入力したかわからない表示のされ方をしていますが気にせず入力して Enter してください。

エラーが出まくった時の対処法

node-sass のインストールをすると

npm ERR! ○○○○○〜〜〜〜〜〜〜○○○○○

といったエラーが大量に出てくる場合があります。

そんな事態に遭遇した場合は下記の手順を試してみてください。

アクセス権限の変更

下記コマンドを実行してください。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

意味はわかりませんが、アクセス権限を変更するとかしないとかしてるらしいです。

再度 node-sass のインストール

上記のコマンドを実行後、下記のコマンドで再度 node-sass をインストールしてみてください。

npm install -g node-sass

これでもインストールできなかった場合は、私のMacの環境でインストールされた node-sass のダウンロードリンクを貼り付けておきますのでよろしければダウンロードしてご活用ください。m(_ _)m

↑何これww すごい怪しいボタンになってしまってますがウイルスとかは入っていませんのでご安心ください(T▽T)

ちゃんとインストールされているか確認

はじめにお好みの名前で作成したフォルダを開いてみましょう。

  • bin
  • lib

という2つのフォルダが確認できればOKです。

Atom の Sass Autocompile の設定を変更

Atom を起動して

設定画面 > パッケージ > sass-autocompile

を開いてください。

下の方にスクロールしてしばらく進むと「Path to ‘node-sass’ command」という入力欄が現れます。

その入力欄に先ほどインストールした node-sass の本体までのパスを入力します。

例)

/Users/(ユーザーネーム)/Desktop/work/tool/node-sass/bin

↑ node-sass のファイルが bin の中に入っていますが、この入力欄には最後の「node-sass」は入力しません。

あくまで node-sass 本体『までの』パスを入力してください。

以上です。

早速、scssファイルを開いて ⌘ + s で保存してみましょう。

画面下でくるくる回っているローディングマークが出て、緑色のメッセージが出れば成功です!

関連記事

【脱Atom】VSCodeでscssの出力先をcssフォルダ内にする方法
2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければ
必要最低限で必要十分なスペックを備えたおすすめPC|Webデザイナー・コーダーのためのPC選び
「あなたにピッタリなPCはこれだ!」と僭越ながらアドバイスさせていただく記事を書こうと思い、キーボードを叩いています。 こんにちは。管理人で
WordPressで開発環境を構築する方法
今回はWeb制作の現場では、どのようにWordPressの開発環境を構築しているのかをお伝えしようと思います。 すでに公開しているWordP
2023年6月20日以降、SourceTreeでプッシュできなくなったのはBitbucketの SSHホスト鍵が更新されたから
2023年6月20日、Bitbucketの「SSHホスト鍵」が更新され、今までSSH接続していたユーザーはいきなりプッシュできなくなって焦っ
Live Sass Compilerでコンパイル後にインデントがスペースになってしまう時の解決策【VSCode】
Atomがサービス終了してVSCodeに乗り換えようとしていました 2022年12月15日にAtomエディタがサービス終了し、私はAtomか
特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった
近頃、Chat GPT なるものが話題ですが、私もChat AI 的なサブスクリプションサービスを契約してみました。 お題目にもある通り、そ



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です