nuxt production mode에서 css 가 작동 안 합니다.

[sk31park]

현재 nuxt로 개발중에 있으며,
아래와 같이 flicking.js에서 css를 import를 해주고 있습니다.

import Vue from 'vue';
import Flicking from "@egjs/vue-flicking";
import "@egjs/vue-flicking/dist/flicking.css";

Vue.use(Flicking);

혹시 몰라서 nuxt.config.js에서도 아래와 같이 css를 글로벌로 써주고 있습니다.

css: [
  'remixicon/fonts/remixicon.css',
  '@egjs/vue-flicking/dist/flicking.css',
  '~/assets/css/main.css',
],

하지만 production으로 배포했을때,
css가 적용이 되지 않는 문제가 발생합니다.

이를 해결하기 위해 제가 nuxt에서 따로 해야 하는 설정이 있는지 궁금합니다.

[WoodNeck]

@sk31park 님 안녕하세요.

이 이슈의 경우 두 가지 원인이 예상되는데요,

첫번째는 production 빌드에서 생성되는 엘리먼트들의 class 이름이 개발환경과 달라져 (scoped 등) 빌드시에 CSS가 존재함에도 적용되지 않는 이슈일 수 있을 것 같습니다. production 모드의 엘리먼트 클래스 이름에 명시적으로 flicking-viewport flicking-camera 등이 포함되는지 확인해보시면 좋을 것 같구요, 그렇지 않다면 이를 비활성화하는 관련 설정을 찾아보셔야 할 것 같습니다.

두번째는 production 환경에서 글로벌 style이 purge되어 사라져, 실제 페이지에 포함되는 이슈와 연관이 있을 것 같습니다.
검색해보니 다음 이슈들과 관련이 있지 않을까 합니다. 해당 이슈들에 나온 방법들 시도해보시면 좋을 것 같습니다.

• Nuxt production build not including Global and Module CSS nuxt/nuxt#7254
• Inconsistent css in dev vs prod nuxt/nuxt#4204

일전에 비슷한 이슈를 접수받은적이 있는데요(#573) 이 경우 style을 CDN으로 직접 import할 경우 해결되었던 것으로 보아 두번째 원인에 좀 더 가깝지 않을까 하네요

[sk31park]

옙 말씀하신 두번째 원인이 맞았습니다.

cdn으로 css를 추가해주었고 production 모드에서도 잘 작동됨을 확인하였습니다.

감사합니다 🙂