안녕하세요. 16기 이혜성입니다.
현재 셀프로 에어비엔비 클론 코딩을 프런트 겸해서 진행중이에요.
npm run css
스크립트가 없다고 하네요.
error log
node, npx, npm 버전 확인
npm init(전부 enter눌러서 pass)
그럼 자동으로 package.json파일 생성 완료
아래 5가지 키값 제외하고 나머지 제외!
{
"name": "airbnb-clone",
"version": "1.0.0",
"description": "Cloning Airbnb with Python, Django, Tailwind and more...🐱👓🐱🚀✔\r written by hyeseong lee",
"repository": {
"type": "git",
"url": "git+https://github.com/hyeseong-dev/airbnb-clone.git"
},
"homepage": "https://github.com/hyeseong-dev/airbnb-clone#readme"
}
npm install gulp gulp-postcss gulp-sass gulp-csso node-sass -D
마지막 -D 옵션으로 개발자모드?로 설치함
Console 화면
경고가 많이 뜨는데;;; 저게 원흉인지 모르겠네요. 일단 못먹어도 고했습니다.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
(명령어 출처, tailiwind css웹페이지)
설치 화면
1초도 안되서 후딱 되는거 보면 뭔가 제대로 되지 않은 느낌이 드네용;;;
@latest 이거 빼고 개발자 모드로 깔아봤어요.
아래와 같이 tailwind 설정 파일 생성!
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
};
exports.default = css;
npm i autoprefixer -D
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;
npm run css
ㅠ.ㅠ 오류 발생하네요.
노드 버전 14.5로 재설치해서 해결함....