tailwind , gulp / Did you forget to signal async completion? 환경설정 오류

이정민·2021년 10월 10일
0

Did you forget to signal async completion?

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"
  }
}
profile
안녕하세요.

0개의 댓글