Sass（SCSS）の書き方や環境は人によって結構違うと思う。
先日、人からもらったSassをコンパイルしたら次のエラーが。
Error: Can't find stylesheet to import.
╷
4 │ @import "init/**";
│ ^^^^^^^^^
╵本人に聞いたらGulpのプラグインを使っているらしいので、同じ環境を作ってみた。
Gulpの導入
まずNode.jsとNPMが使えるようにしておく。
ターミナルでプロジェクトフォルダを開き、npm initでプロジェクト作成。
npm init必要なモジュールをインストールする。
npm install -D gulp sass gulp-sass gulp-sass-globプロジェクトフォルダ直下に、次のようなgulpfile.jsファイルを作成。
※ファイルのパスなど必要に応じて書き換える。
// gulpプラグインの読み込み
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const sassGlob = require("gulp-sass-glob");
// タスク作成
gulp.task("default", () => {
return (
gulp
.src("scss/style.scss") // scssファイル取得
.pipe(sassGlob()) // globを有効にする
.pipe(sass()) // コンパイル
.pipe(gulp.dest("css")) // cssフォルダー以下に保存
);
});タスクの実行。
npx gulpヒント
gulpfile.jsでは、こんな感じでオプションが指定できる。
...
gulp.task("default", function() {
return (
gulp
.src("scss/style.scss")
.pipe(sass({outputStyle: "expanded"})) //outputStyleで出力コード成形
.pipe(gulp.dest("css"))
);
});他の人と共同編集するときは、gulpfile.js、package.json、package-lock.jsonを一緒に渡しておくと、同じ環境で作業できるので安心だ。
コメント