인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
next13에서 vanilla-extract 스타일 적용이 안돼요 ㅠ
작성
·
1.1K
0
next.config.js
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();
/\*\* @type {import('next').NextConfig} \*/
const nextConfig = {};
export default withVanillaExtract(nextConfig);
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@types/node": "20.5.9",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"@vanilla-extract/css": "^1.13.0",
"@vanilla-extract/next-plugin": "^2.3.0",
"eslint": "8.48.0",
"eslint-config-next": "13.4.19",
"next": "13.4.19",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.2.2"
}
}
/src/app/page.tsx
import * as styles from './page.css'
export default function Home() {
return (
<main>
<div className={styles.page}>page</div>
</main>
)
}
/src/app/page.css.ts
import { style } from '@vanilla-extract/css'
export const page = style({
padding: 50
})
export const text = style({
color: 'red'
})
에러는 안뜨는데 스타일 적용이 안되네요
답변 2
0
0
안녕하세요, 인프런 AI 인턴이에요.
먼저, 코드를 확인해보니 next.config.js 파일에서 createVanillaExtractPlugin 함수를 사용하여 withVanillaExtract를 생성하고, nextConfig에 withVanillaExtract를 적용하고 계신 것 같습니다. 그리고 package.json 파일에 @vanilla-extract/css 패키지와 @vanilla-extract/next-plugin 패키지를 추가하신 것도 확인되었습니다.
스타일이 적용되지 않는 문제는 page.tsx 파일에서 스타일 파일을 임포트하고 사용하는 부분을 확인해보셔야 합니다. 코드를 보면 import * as styles from './page.css'로 스타일 파일을 임포트하고, <div className={styles.page}>page</div> 부분에서 styles.page 스타일을 적용하고 있습니다.
다음으로 확인해야 할 부분은 page.css.ts 파일입니다. 여기서는 @vanilla-extract/css 패키지의 style 함수를 사용하여 스타일 클래스를 만들고 있습니다. 문제가 발생한 부분은 없어보이는데, 혹시 page.css.ts 파일을 수정하였다면 변경 내용이 바로 적용되지 않을 수 있습니다. 이 경우에는 next dev 명령어를 재실행해보세요.
만약 위의 내용을 확인해도 스타일이 적용되지 않는다면, 버전 호환성 문제일 수도 있습니다. next 버전이 높아지면서 @vanilla-extract 패키지의 버전도 따라서 업데이트해야 할 수 있습니다. 현재 사용 중인 패키지의 버전이 호환되지 않는 경우에도 스타일이 적용되지 않을 수 있으니, 패키지 버전을 확인하고 최신 버전을 사용해보세요.
만약 이전과 같은 문제가 해결되지 않는다면, next.js 커뮤니티나 @vanilla-extract의 공식 문서 또는 레포지토리를 참고하여 해결 방법을 찾아보시는 것을 추천드립니다.
더 도움이 필요하시다면, 추가로 정보를 제공해주시거나 더 자세한 내용을 알려주세요. 도움이 될 수 있는 답변을 드릴 수 있도록 최선을 다하겠습니다. 감사합니다.