Emotion을 설치하고 import도 잘 해왔는데 Emotion 적용이 되지 않고 계속 일반 css가 적용되는 문제가 있었다.
vite.config.js 파일(해당 React 프로젝트는 vite로 빌드하였다.)과 jsconfig 파일을 다음과 같이 설정하니 잘 적용되었다.
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxImportSource: "@emotion/react",
babel: {
plugins: ["@emotion/babel-plugin"],
},
}),
],
});
jsconfig.json
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}