Sassの導入手順の自分用のメモです。
後述の参照ページの要約。
毎回手順を忘れているのでメモメモ……(- -)
手順
Node.jsを公式サイトからインストールする
コマンドプロンプトを起動する（Windowsキー＋R）
[node -v]と入力しインストールされているか確認（コマンドはNode.jsのバージョン確認）
プロジェクトフォルダーを作成し、そこに移動する。移動するにはコマンドを打つか、[cd ]入力後、コマンドプロンプトにフォルダをドラッグアンドドロップする
[npm init -y]を実行し、package.jsonを作成
[npm install -D gulp]を実行し、gulpをインストール
[npm install -D gulp gulp-sass]を実行し、gulp本体とgulp-sassをインストールする
gulpfile.jsを作成し、以下のコードをコピペする
// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);
// style.scssをタスクを作成する
gulp.task(“default”, function() {
// style.scssファイルを取得
return (
gulp
.src(“css/style.scss”)
// Sassのコンパイルを実行
.pipe(sass())
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});
cssフォルダを作成style.scssを作成し以下のコードをコピペする
// ネストのテスト
div {
p {
font-weight: bold;
}
}
// 変数のテスト
$fontColor: #525252;
h1 {
color: $fontColor;
}
[npx gulp]を実行するとscssからcssが作成される
gulpfile.jsを以下のコードに置き換えるとwatchが使える
// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);
// style.scssの監視タスクを作成する
gulp.task(“default”, function() {
// ★ style.scssファイルを監視
return gulp.watch(“css/style.scss”, function() {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
return(
gulp
.src(“css/style.scss”)
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: “expanded”
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(“error”, sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});
});
以下を参照、この記事が無かったら無理だった。
絶対つまずかないGulp4入門(2019年版)
インストールとSassを使うまでの手順
nodistのエラー解決法
C:¥Users¥(ユーザー名)¥.npmrcを削除する
コメント