Penyajian PROD dan DEV CSS tidak konsisten dalam Nuxt3

Question

Saya membina perpustakaan komponen Vue3 (mari kita panggilnya MY-LIBRARY) menggunakan Nuxt3, menggunakan tailwind v2. Saya mempunyai projek sampingan yang dipanggil MY-SIDE-PROJECT, dibina dengan laravel-mix (v6) dan Vue3, yang menggunakan tailwind v2. Saya mempunyai satu lagi projek Vue3 (sebutkan ia My-PROJECT) yang dibina dengan Nuxt3, juga menggunakan tailwind v2.

Dalam MY-PROJECT, saya menggunakan komponen daripada MY-LIBRARY untuk memaparkan halaman.

Apabila saya membina projek saya dalam pengeluaran menggunakan skrip npm run build yang mencetuskan nuxt build, halaman saya disiarkan, tetapi amaran A saya muncul dalam konsol, sebagai contoh:

[AMARAN] Sintaks bersarang CSS tidak disokong dalam persekitaran sasaran yang dikonfigurasikan ("chrome87", "edge88", "es2020", "firefox78", "safari14 ") [unsupported-css-nesting]

    <stdin>:1:62181:
      1 │ ...-sel}@media (lebar min:1024px){&--bordered-max-lg,&--hidden-max...
        ╵</pra>
<p><strong>EDIT: Isu ini telah diselesaikan, CSS untuk MY-LIBRARY tidak digabungkan dengan betul. </strong></p>
<p><strong>Namun, CSS dalam halaman projek saya tidak ditafsirkan dengan betul. </strong></p>
<p>Saya mahu halaman dalam MY-PROJECT menyajikan CSS dengan betul daripada MY-LIBRARY apabila dibina dalam pengeluaran. </p>
<p>Saya telah mencuba menggunakan konfigurasi nuxt dalam MY-PROJECT, tetapi gabungan Nuxt3/Vue3 dan tailwind v2 tidak didokumenkan dengan baik di Internet. Saya tidak boleh benar-benar beralih ke tailwind3 pada masa ini kerana projek itu mempunyai beberapa keperluan keserasian luaran.</p>
<p>Ini ialah fail nuxt.config.js untuk projek saya: </p>
<pre class="brush:php;toolbar:false;">eksport lalai defineNuxtConfig({
    ...
    css: [
        '@/assets/styles/main.scss'
    ],
    postcss: {
        pemalam: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
    bina: {
        postcss: {
            postcssPilihan: {
                pemalam: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

Ini ialah fail tailwind.config.js untuk projek saya:

module.exports = {
    penting: benar,
    pratetap: [
        memerlukan('MY-LIBRARY/tailwind.config')
    ],
    bersihkan: {
        kandungan: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
        ]
    },
    tema: {
        lanjutkan: {
            ...
        }
    },
    varian: {
        ...
    }
}

Saya telah cuba menambah postcss.config.js dalam MY-PROJECT tetapi ia tidak mengubah apa-apa.

Jika anda mempunyai sebarang cadangan tentang cara menyelesaikan masalah saya, saya amat berterima kasih! Terima kasih terlebih dahulu.

Edit: Selepas mencuba beberapa perkara, nampaknya masalah utama ialah arahan npm run dev (jalankan secara setempat) dan npm run build ; npm run start (semasa menggunakan, tetapi saya juga menghasilkan semula secara tempatan) tidak sekata. CSS tidak diberikan sama.这是我的项目的 package.json：

{
  "nama": "PROJEK SAYA",
  "swasta": benar,
  "skrip": {
    "build": "nuxt build",
    "dev": "nuxt dev --port=3000",
    "docker": "npm run dev",
    "generate": "generate nuxt",
    "preview": "pratonton nuxt",
    "postinstall": "nuxt prepare",
    "start": "nuxt start"
  },
  "enjin": {
    "nod": "16.x",
    "npm": "8.x"
  },
  "kebergantungan": {
    "PERPUSTAKAAN SAYA": "^1.1.2",
    "@pinia/nuxt": "^0.4.7",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "luxon": "^3.3.0",
    "nuxt": "^3.3.1",
    "nuxt-proxy": "^0.4.1",
    "pinia": "^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"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "4.2.1",
    "@types/node": "^18.14.2",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "lebih cantik": "^2.8.4",
    "sass-loader": "^13.2.2"
  },
  "mengatasi": {
    "vue": "terkini"
  }
}

Answer 1

Saya akhirnya faham di mana masalahnya. Dalam konfigurasi tailwind saya, saya perlu menyatakan bahawa saya juga mahu menggunakan tailwind pada komponen yang diimport daripada MY-LIBRARY.

Terima kasih kepada @JSONDerulo untuk pertukaran, yang membolehkan saya menentukan sumbernya.

#MY-PROJECT's tailwind.config.js

module.exports = {
    important: true,
    presets: [
        require('MY-LIBRARY/tailwind.config')
    ],
    purge: {
        content: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
            "./node_modules/MY-LIBRARY/components/**/*.{js,vue,ts}" #<-- the important part
        ]
    },
    theme: {
        extend: {
            ...
        }
    },
}