MAC으로 프로그래밍을 하는 도중 npm run css 명령어를 실행했을 때
[21:22:07] 'The following tasks did not complete: default'
[21:22:07] 'Did you forget to signal async completion?'
라는 오류가 터미널창에 나타났다.
//gulpfile.js
const gulp = require("gulp");
const css = () => {
const postCSS = require("gulp-postcss");
const sass = require("gulp-sass"));
const minify = require("gulp-csso");
sass.compiler = require("node-sass");
return gulp
.src("assets/scss/styles.scss")
.pipe(sass().on("error", sass.logError))
.pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
.pipe(minify())
.pipe(gulp.dest("static/css"));
};
exports.default = css;
{
"name": "pre-project",
"version": "1.0.0",
"description": "## Study_Projects 내용",
"repository": {
"type": "git",
"url": "git+https://github.com/dlwjdals5600/Practice-Project.git"
},
"scripts": {
"css": "gulp"
},
"homepage": "https://github.com/dlwjdals5600/Practice-Project#readme",
"devDependencies": {
"autoprefixer": "^10.3.7",
"gulp": "^4.0.2",
"gulp-csso": "^4.0.1",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.0.0",
"sass": "^1.42.1",
"tailwindcss": "^2.2.16"
}
}
Debugger attached를 했을 때
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the sass
and node-sass
packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
문장이 출력이 됬다.
const gulp = require("gulp");
const css = () => {
const postCSS = require("gulp-postcss");
const sass = require("gulp-sass")(require("sass"));
const minify = require("gulp-csso");
sass.compiler = require("sass");
return gulp
.src("assets/scss/styles.scss")
.pipe(sass().on("error", sass.logError))
.pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
.pipe(minify())
.pipe(gulp.dest("static/css"));
};
exports.default = css;
이전 코드를 위에 코드처럼 변경한 뒤에 잘 실행이 되었다.
이유는
1. gulp-sass 5 에서는 기본 sass컴파일러가 없어서 직접 설정해야 했고
2. node-sass는 이제 더 이상 사용하지 않고있기 때문인거 같다.(Error: Cannot find module 'node-sass'라고 출력된다.)
https://stackoverflow.com/questions/67161579/cannot-find-module-sass (참고)
위에 오류 말고도 MAC에서는 앞에 sudo npm install sass -D 같이
sudo를 붙여야 devDependencies에 요소가 추가되는 것을 확인 할 수 있었다.
처음에는 npm install를 사용해서 계속 오류가 출력됬었다....
2시간동안 너무 삽질을 했던것 같다...
{
"name": "pre-project",
"version": "1.0.0",
"description": "## Study_Projects 내용",
"repository": {
"type": "git",
"url": "git+https://github.com/dlwjdals5600/Practice-Project.git"
},
"scripts": {
"css": "gulp"
},
"homepage": "https://github.com/dlwjdals5600/Practice-Project#readme",
"devDependencies": {
"autoprefixer": "^10.3.7",
"gulp": "^4.0.2",
"gulp-csso": "^4.0.1",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.0.0",
"sass": "^1.42.1",
"tailwindcss": "^2.2.16"
}
}