Web/Study

[Tailwindcss] npm run dev์‹œ Failed to load PostCSS config ์—๋Ÿฌ

2023. 5. 19. 11:04
๋ชฉ์ฐจ
  1. ๐Ÿšซ tailwindcss ์„ค์น˜ ํ›„ postcss ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ
  2. โœ… postcss.config.js์˜ ํ™•์žฅ์ž ๋ณ€๊ฒฝํ•˜๊ธฐ
  3. ๐Ÿ’ญ Tailwindcss ์„ค์น˜ ์ฐธ๊ณ  ์ฃผ์†Œ

๐Ÿšซ tailwindcss ์„ค์น˜ ํ›„ postcss ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ

ํ”„๋กœ์ ํŠธ ์„ธํŒ… ์ค‘ tailwindcss์˜ Get started with Tailwind CSS๋ฅผ ์ฐจ๊ทผ์ฐจ๊ทผ ๋”ฐ๋ผํ–ˆ๋Š”๋ฐ๋„ npm run dev์‹œ Failed to load PostCSS config ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. postcss.config.js ํŒŒ์ผ์ด ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

PS C:\git-repo\twitter-clone> npm run dev

> twitter-clone@0.0.0 dev
> vite


  VITE v4.3.8  ready in 431 ms

  โžœ  Local:   http://127.0.0.1:5173/
  โžœ  Network: use --host to expose
  โžœ  press h to show help
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/git-repo/twitter-clone): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: C:/git-repo/twitter-clone): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'C:\git-repo\twitter-clone\package.json' contains "type": "module". To treat it as a CommonJS 
script, rename it to use the '.cjs' file extension.
This file is being treated as an ES module because it has a '.js' file extension and 'C:\git-repo\twitter-clone\package.json' contains "type": "module". To treat it as a CommonJS 
script, rename it to use the '.cjs' file extension.
    at file:///C:/git-repo/twitter-clone/postcss.config.js:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importDefault (file:///C:/git-repo/twitter-clone/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:36460:18)
    at async Object.search (file:///C:/git-repo/twitter-clone/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:28897:38)
]

 

โœ… postcss.config.js์˜ ํ™•์žฅ์ž ๋ณ€๊ฒฝํ•˜๊ธฐ

๋กœ๊ทธ๊ฐ€ ์‹œํ‚ค๋Š”๋Œ€๋กœ postcss.config.js๋ฅผ postcss.config.cjs๋กœ rename ํ•˜์ž ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.

PS C:\git-repo\twitter-clone> npm run dev

> twitter-clone@0.0.0 dev
> vite


  VITE v4.3.8  ready in 366 ms

  โžœ  Local:   http://127.0.0.1:5173/
  โžœ  Network: use --host to expose
  โžœ  press h to show help

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
์˜ค์ „ 10:51:38 [vite] page reload tailwind.config.js

 

๐Ÿ’ญ Tailwindcss ์„ค์น˜ ์ฐธ๊ณ  ์ฃผ์†Œ

https://tailwindcss.com/docs/installation/using-postcss
 

Install Tailwind CSS using PostCSS - Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

tailwindcss.com

๋ฐ˜์‘ํ˜•

'Web > Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vuejs] Vite+Vue๋กœ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ  (0) 2023.05.18
[๊ฐ•์˜๋ฉ”๋ชจ] ์‹ค์Šต UI ๊ฐœ๋ฐœ๋กœ ๋ฐฐ์›Œ๋ณด๋Š” ์ˆœ์ˆ˜ javascript์™€ VueJS ๊ฐœ๋ฐœ  (0) 2022.05.01
MVC Pattern  (0) 2022.04.29
  1. ๐Ÿšซ tailwindcss ์„ค์น˜ ํ›„ postcss ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ
  2. โœ… postcss.config.js์˜ ํ™•์žฅ์ž ๋ณ€๊ฒฝํ•˜๊ธฐ
  3. ๐Ÿ’ญ Tailwindcss ์„ค์น˜ ์ฐธ๊ณ  ์ฃผ์†Œ
'Web/Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Vuejs] Vite+Vue๋กœ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ
  • [๊ฐ•์˜๋ฉ”๋ชจ] ์‹ค์Šต UI ๊ฐœ๋ฐœ๋กœ ๋ฐฐ์›Œ๋ณด๋Š” ์ˆœ์ˆ˜ javascript์™€ VueJS ๊ฐœ๋ฐœ
  • MVC Pattern
/* a piece of dev */
/* a piece of dev */
/* a piece of dev */
Piece
/* a piece of dev */
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (44)
    • ๐Ÿบ (3)
    • DE (8)
      • LLM (2)
      • BigQuery (3)
      • SQL (3)
      • Etc. (0)
    • Web (13)
      • Mastodon (1)
      • Study (4)
      • Issues (5)
      • Etc. (3)
    • Dev (20)
      • Git (2)
      • PS (8)
      • Read (7)
      • Etc. (3)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • slowQuery
  • sql
  • ๋ถํด๋Ÿฝ
  • python
  • javascript
  • bigquery
  • GIT
  • oobabooga
  • web
  • ์ œ๋กœ๋ณด๋“œ4
  • GCP
  • ๋…ธ๊ฐœ๋ถ
  • vscode
  • PostgreSQL
  • ๋ฐฑ์ค€
  • ํ‚คํฌ๋ก K1
  • conda
  • Jekyll
  • colorscheme
  • tailwindcss
  • ํ† ์ฒดํ”„
  • ZeroBoard4
  • ๋…ธ๋งˆ๋“œ์ฝ”๋”
  • vueJS
  • Mastodon
  • ์™„์ „ํƒ์ƒ‰
  • postcss
  • ๋งˆ์Šคํ† ๋ˆ
  • ์•„๋ณด์นด๋„์—๋””์…˜
  • Vite

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
/* a piece of dev */
[Tailwindcss] npm run dev์‹œ Failed to load PostCSS config ์—๋Ÿฌ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.