【Mac M1対応】Dart Sassの環境構築

所有時間1分

今回はMac M1にも対応しているDart Sassの環境構築の方法について紹介します。

目次

Node.jsのインストール・バージョンの確認

Sassを使用するにはNode.jsが必要なのでまだインストールが済んでいない場合は下のリンクからインストールしておきましょう。

>> Node.jsのインストールはこちら

$ node -v

Node.jsのバージョンを確認するにはターミナルで上記のコマンドを入力します。

package.jsonを作成

$ npm init

上記のコマンドを入力するとpackage.jsonに記載する情報を聞かれるので答えていき(答えずにEnterを押してもOK)、最後にy/yesと入力するとカレントディレクトリにpackage.jsonが作成されます。

Dart Sassパッケージをインストール

$ npm install sass –save-dev //開発時
$ npm install sass –save //公開時

上記のコマンドのいずれかを入力するとpackage.jsonにsass(Dart Sass)が追記されます。

「–save-dev」の場合はdevDependenciesに追記、「–save」の場合はdependenciesに追記されます。また、npm5以降では「$npm install パッケージ」と入力するだけで自動的にdependenciesに追記されます。

$ npm uninstall パッケージ –save-dev //devDependencies
$ npm uninstall パッケージ –save //dependencies

ちなみにpackage.jsonにインストールしたパッケージをアンインストールするコマンドは上記の通りです。

Sassファイル作成 & コンパイル前準備

  • css
    • style.css
  • sass
    • main.scss
  • package.json

今回は上記のような階層でSassファイルのコンパイルを行います。それでは、paclage.jsonファイルの「scripts」に以下のように追記していきます。

…省略

“scripts”: {
“compile:sass”: “sass sass/main.scss css/style.css -w”
},

…省略

scripts > compile:sassには「sass」, 「コンパイルするsass/scssファイルパス」, 「コンパイル後のcssを記述するcssファイルパス」「-w」の順でスペースを開けて追記します。

パスはpackage.jsonからのファイルパスを入力し、「-w (–watch)」を追記することでsass/scssファイルの変更を継続してcssファイルに自動更新されます。

Dart Sassのコンパイル

$ npm run compile:sass

上記のコマンドを入力するとwatchモードになり、sassファイルの変更が指定したcssファイルに自動更新されます。自動更新を終了するには「control + c」をタイピングします。

以上です。

参考サイト

URLをコピーする
URLをコピーしました!
目次
閉じる