【mac向け】Sassのインストール手順を実際にやってみた (node-sassでの方法)

スポンサーリンク
css

以下の書籍を参考にして、プロジェクトフォルダ作成→各種Sassに必要なツールのインストール→コンパイルしてcssファイル生成 までやってみました!

事前に必要な情報まとめ

Node.js
Javascriptで作られたサーバーサイド言語。この後インストールすることでnpmというsassの導入に必要なパッケージ管理マネージャーなるものを使用することができるようになる。

npm
Node Packaged Modulesの略。Node.jsをインストールすることで使用できる。npmコマンドというコマンドで必要なパッケージをインストールすることができる。今回の記事内だとgulp , gulp-sass, gul-cliなど様々なgulp系のパッケージをインストールする。

gulp
Node.jsで動作するタスクランナー。

タスクランナー
様々な処理(タスク)を自動化してくれるツール。今回の手順内では、gulpというタスクランナーにSassのコンパイルと一つの処理として設定して、コマンド実行でその処理を実行するための役割。

scssファイル
SCSS記法で書かれたSassファイル。拡張子は「.scss」。gulp実行によってこのファイルがcssファイルにコンパイルされる。

gulp-cli
Gulpコマンドラインユーティリティのこと。これをnpmインストールしないとターミナル上でgulpコマンドが使用できない。

gulpfile.js
gulpの実行時に見にいくファイル。中に実行したいJavaScriptのコードを「タスク」として記載して設定する。

対象のプロジェクトフォルダとscssファイルを作成

まず対象のファイルを作成します
今回は「test_project」名称のフォルダをDesktop配下に配置

scssファイルも「test.scss」の名称で上記フォルダ内に作成

test.scssファイルの中身は例として以下を記述しておく

#main {
    background-color: red;
    p {
        font-size: 20px;
        display: inline;
    }
}

Node.jsのインストール

以下リンクのLTSと記載ある方(左側)をダウンロード
https://nodejs.org/ja/

指定の配下にダウンロードする

ダウンロードしたファイルを開くと以下のようなインストール画面が起動するので、特に続けるを押下していく

インストール完了

一応ターミナルを起動し、以下コマンドで対象のバージョン情報が表示されていればインストールは成功している

node -v

想定のv14.18.1のバージョンがインストールされていることを確認

gulp-cliのインストール

ターミナル起動し、以下コマンドでgulp-cliのインストールを行う

npm install –global gulp-cli

(自分は権限のエラーが発生したので、sudo npm install –global gulp-cli とsudoをつけて実行しました。)
実行後以下のバージョン確認コマンドでバージョンが表示されればインストール完了

gulp -v

package.jsonの作成

ターミナル起動し、対象のプロジェクトフォルダ配下に移動し、
以下コマンドの実行でpackage.jsonファイルを作成できる

npm init -y

以下のような実行結果

フォルダを見るとpackage.jsonファイルが作成されている

gulp , gulp-sass をインストール

引き続きターミナルで以下コマンドを実行し、gulp,gulp-sassをインストールする
※三つ目のsassのインストールは現時点だとNodeのバージョンの関係でコンパイル時にエラーが発生したため解消法としてインストールした(読んでいる時期によって必要ない可能性あり)

npm install –save-dev gulp 
npm install –save-dev gulp-sass

npm i –save-dev sass

コマンド実行後、package.jsonファイルを見てみるとdevDependenciesの項目に記述が追加されています

gulpfile.js を作成

test_projectフォルダ配下にgulpfile.jsファイルを作成する

中身は以下を記述する

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(){
  return gulp.src('./**/*.scss')
    .pipe(sass({outputstyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function(){
    gulp.watch('./**/*.scss', ['sass']);
});

gulpコマンドの実行

ターミナル起動し、以下コマンドを実行しコンパイルを行う

gulp sass

ターミナル上は以下のようなログが出力される

test_projectフォルダ内を見てみると、test_project/css配下にtest.cssが作成されている

test.cssファイル内は以下で、test.scssファイルがcssの記述にコンパイルされていることが確認できる

#main {
  background-color: red;
}
#main p {
  font-size: 20px;
  display: inline;
}

以上で完了!

終わりに

今回は書籍の内容を参考にして、Sassのインストール手順を実施していきました!
もっとgulpfileの設定をいじってみようと思います。
読んでいただきありがとうございました!

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました