13
16

More than 5 years have passed since last update.

Atomでsassを使いたいと思ったのでその方法をまとめました。

Posted at

Atomにsassを導入してみた。

以前はcould9でsassを使っていたけど、いつも使ってるエディタのatomに導入しようと思った為。

導入方法

導入には「nodo.js」と「node-sass」のインストールが必要です。
Atomには、パッケージで「sass-autocompile」があるのでそのインストールまでまとめていきます。

nodo.jsのインストール

公式サイト:https://nodejs.org/ja/

公式サイトからインストールします。

ターミナルでnode-vを打ちインストールされてるか確認。
npm -vも同時にインストールされてるのでこちらも一応こちらも確認。

node -v
 v8.11.4
npm -v
 5.6.0

よしよし、インストール出来てますね。

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

次にnode-sassをインストールするためターミナルに
npm install -g node-sassを打ち込む。

npm install -g node-sass

しかしエラーが出てインストールされてません・・・。
スクリーンショット 2018-09-02 14.48.16.png

エラーはアクセス権限がありません的な事が書かれてる。

下記のサイトを元にエラーを解決していく。
参照:http://codetofly.com/others/nodejs-node-sass-install/
参照:https://qiita.com/okoysm/items/ced3c3de30af1035242d

  • まずはnpm config get prefixで確認して見る。
npm config get prefix

すると結果がこちら

/user/local

npmフォルダのオーナーを自分のユーザー名に変更して、内包されているフォルダなどのパーミッションもこれで変えるため下記のコマンドを打つ。

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

もう一度インストールを試みる。

npm install -g node-sass

無事、インストール出来ました!!!

確認でnode-sass -vでインストールが出来たか見てみる。

node-sass -v

スクリーンショット 2018-09-02 16.26.46.png

うん!無事にインストール出来ました!

補足:Finderから/user/localに移動したかったが、見つからない〜と思ってましたが、
Finderのメニューから「移動」→「フォルダに移動」を選択。
/user/lodalを入力すると移動できました(^^)
参照:http://d.hatena.ne.jp/testnoda/20120515/1337069061

atomでパッケージをインストール

Atomを開いて、環境設定のインストールからsass-autocompileをインストールする。
スクリーンショット 2018-09-02 16.30.56.png

同じく環境設定のパッケージに追加されて入れば成功です!!
スクリーンショット 2018-09-02 16.32.16.png

実際は、エラーのところですごく時間を使ってしまいましたが、同じエラーの人がいたので同じように実行していけばすんなりいけました(^O^)

導入を考えてる人は参考にして下さい。お疲れ様でした!!!

13
16
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
16