Nuxt3에서 PROD 및 DEV CSS 렌더링이 일관되지 않음

Question

tailwind v2를 사용하여 Nuxt3를 사용하여 Vue3 구성 요소 라이브러리(MY-LIBRARY라고 부르겠습니다)를 구축했습니다. tailwind v2를 사용하는 laravel-mix(v6) 및 Vue3으로 빌드된 MY-SIDE-PROJECT라는 사이드 프로젝트가 있습니다. Tailwind v2를 사용하여 Nuxt3로 빌드된 또 다른 Vue3 프로젝트(My-PROJECT라고 부르겠습니다)가 있습니다.

MY-PROJECT에서는 MY-LIBRARY의 구성요소를 사용하여 페이지를 렌더링합니다.

nuxt build를 트리거하는 npm run build 스크립트를 사용하여 프로덕션 환경에서 프로젝트를 빌드하면 내 페이지가 제공되지만 A 경고가 콘솔(예:

[경고] 구성된 대상 환경("chrome87", "edge88", "es2020", "firefox78", "safari14)에서는 CSS 중첩 구문이 지원되지 않습니다. ") [지원되지 않는 CSS 중첩]

    <표준 입력>:1:62181:
      1 │ ...-cell}@media (최소 너비:1024px){&--bordered-max-lg,&--hidden-max...
        ╵

EDIT: 이 문제는 해결되었으며 MY-LIBRARY용 CSS가 올바르게 번들되지 않았습니다.

그래도 내 프로젝트 페이지의 CSS가 올바르게 해석되지 않습니다.

MY-PROJECT의 페이지가 프로덕션 환경에서 빌드될 때 MY-LIBRARY의 CSS를 적절하게 제공하고 싶습니다.

MY-PROJECT에서 nuxt의 구성을 사용해 보았지만 Nuxt3/Vue3과 tailwind v2의 조합이 인터넷에 잘 문서화되어 있지 않습니다. 프로젝트에 외부 호환성 요구 사항이 있기 때문에 지금은 tailwind3으로 이동할 수 없습니다.

이것은 내 프로젝트의 nuxt.config.js 파일입니다:

기본 정의 내보내기({
    ...
    CSS: [
        '@/assets/styles/main.scss'
    ],
    포스트CSS: {
        플러그인: {
            tailwindcss: {},
            자동 접두어: {},
        },
    },
    짓다: {
        포스트CSS: {
            postcss옵션: {
                플러그인: {
                    tailwindcss: {},
                    자동 접두어: {}
                }
            }
        }
    }
})

내 프로젝트의 tailwind.config.js 파일은 다음과 같습니다.

module.exports = {
    중요: 사실,
    사전 설정: [
        require('MY-LIBRARY/tailwind.config')
    ],
    제거: {
        콘텐츠: [
            "./comComponents/**/*.{js,vue,ts}",
            "./페이지/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
        ]
    },
    주제: {
        연장하다: {
            ...
        }
    },
    변형: {
        ...
    }
}

MY-PROJECT에 postcss.config.js를 추가해 보았으나 아무런 변화가 없었습니다.

내 문제를 해결하는 방법에 대한 제안 사항이 있으면 매우 감사하겠습니다! 미리 감사드립니다.

편집: 몇 가지를 시도해 본 결과, 주요 문제는 npm run dev (로컬 실행) 및 npm 명령인 것 같습니다. run build ; npm run start (배포할 때 로컬에서도 재현함)가 고르지 않게 렌더링됩니다. CSS는 유사하게 렌더링되지 않습니다.这是我的项目的 package.json：

{
  "name": "내 프로젝트",
  "비공개": 사실,
  "스크립트": {
    "build": "다음 빌드",
    "dev": "nuxt dev --port=3000",
    "docker": "npm 실행 개발",
    "generate": "다음 생성",
    "preview": "다음 미리보기",
    "postinstall": "다음 준비",
    "start": "다음 시작"
  },
  "엔진": {
    "노드": "16.x",
    "npm": "8.x"
  },
  "종속성": {
    "내 라이브러리": "^1.1.2",
    "@pinia/nuxt": "^0.4.7",
    "autoprefixer": "^10.4.14",
    "축": "^1.3.4",
    "룩손": "^3.3.0",
    "다음": "^3.3.1",
    "nuxt-proxy": "^0.4.1",
    "피니아": "^2.0.33",
    "sass": "^1.60.0",
    "tailwindcss": "^2.2.17",
    "ufo": "^1.1.1",
    "vue-i18n": "^9.2.2",
    "vue3-lottie": "^2.5.0"
  },
  "devDependency": {
    "@nuxtjs/tailwindcss": "4.2.1",
    "@types/node": "^18.14.2",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "에슬린트": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "더 예뻐요": "^2.8.4",
    "sass-loader": "^13.2.2"
  },
  "재정의": {
    "vue": "최신"
  }
}

Answer 1

드디어 문제가 어디에 있는지 이해했습니다. tailwind 구성에서는 MY-LIBRARY에서 가져온 구성 요소에도 tailwind를 적용하도록 지정해야 합니다.

출처를 정확히 지적할 수 있게 해준 @JSONDerulo에게 감사드립니다.

으아악