PROD- und DEV-CSS-Rendering in Nuxt3 inkonsistent

Question

Ich habe mit Nuxt3 und Tailwind v2 eine Vue3-Komponentenbibliothek (nennen wir sie MY-LIBRARY) erstellt. Ich habe ein Nebenprojekt namens MY-SIDE-PROJECT, erstellt mit Laravel-Mix (v6) und Vue3, das Rückenwind v2 verwendet. Ich habe ein weiteres Vue3-Projekt (nennen wir es My-PROJECT), das mit Nuxt3 erstellt wurde, ebenfalls mit Tailwind v2.

In MY-PROJECT verwende ich Komponenten aus MY-LIBRARY, um die Seite zu rendern.

Wenn ich mein Projekt in der Produktion mit dem Skript npm run build erstelle, das nuxt build auslöst, wird meine Seite bereitgestellt, aber meine A-Warnung erscheint im Konsole, zum Beispiel:

[WARNUNG] Die CSS-Verschachtelungssyntax wird in der konfigurierten Zielumgebung ("chrome87", "edge88", "es2020", "firefox78", "safari14" nicht unterstützt ") [unsupported-css-nesting]

    <stdin>:1:62181:
      1 │ ...-cell}@media (min-width:1024px){&--bordered-max-lg,&--hidden-max...
        ╵

BEARBEITEN: Dieses Problem wurde behoben, das CSS für MY-LIBRARY wurde nicht korrekt gebündelt.

Trotzdem wird das CSS auf meiner Projektseite nicht richtig interpretiert.

Ich möchte, dass Seiten in MY-PROJECT CSS aus MY-LIBRARY ordnungsgemäß bereitstellen, wenn sie in der Produktion erstellt werden.

Ich habe versucht, die Nuxt-Konfiguration in MY-PROJECT zu verwenden, aber die Kombination von Nuxt3/Vue3 und tailwind v2 ist im Internet nicht gut dokumentiert. Ich kann im Moment nicht wirklich zu tailwind3 wechseln, da das Projekt einige externe Kompatibilitätsanforderungen hat.

Dies ist die nuxt.config.js-Datei für mein Projekt:

export default defineNuxtConfig({
    ...
    CSS: [
        '@/assets/styles/main.scss'
    ],
    Postcss: {
        Plugins: {
            tailwindcss: {},
            Autopräfixer: {},
        },
    },
    bauen: {
        Postcss: {
            postcssOptions: {
                Plugins: {
                    tailwindcss: {},
                    Autopräfixer: {}
                }
            }
        }
    }
})

Dies ist die Datei tailwind.config.js für mein Projekt:

module.exports = {
    wichtig: wahr,
    Voreinstellungen: [
        require('MY-LIBRARY/tailwind.config')
    ],
    säubern: {
        Inhalt: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
        ]
    },
    Thema: {
        verlängern: {
            ...
        }
    },
    Varianten: {
        ...
    }
}

Ich habe versucht, postcss.config.js in MY-PROJECT hinzuzufügen, aber es hat nichts geändert.

Wenn Sie Vorschläge zur Lösung meines Problems haben, wäre ich Ihnen sehr dankbar! Dank im Voraus.

Bearbeiten: Nachdem ich einige Dinge ausprobiert habe, scheint das Hauptproblem die Befehle npm run dev (lokal ausführen) und npm zu sein run build ; npm run start (bei der Bereitstellung, aber ich reproduziere auch lokal) wird ungleichmäßig gerendert. CSS wird nicht auf ähnliche Weise gerendert.Öffnen Sie die Datei package.json:

{
  „name“: „MEIN-PROJEKT“,
  „privat“: wahr,
  "Skripte": {
    „build“: „nuxt build“,
    „dev“: „nuxt dev --port=3000“,
    „docker“: „npm run dev“,
    „generate“: „nuxt generic“,
    „preview“: „nuxt-Vorschau“,
    „postinstall“: „nuxt Prepare“,
    „start“: „nuxt start“
  },
  "Motoren": {
    „node“: „16.x“,
    „npm“: „8.x“
  },
  "Abhängigkeiten": {
    „MEINE-BIBLIOTHEK“: „^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",
    „hübscher“: „^2.8.4“,
    „sass-loader“: „^13.2.2“
  },
  „überschreibt“: {
    „vue“: „neueste“
  }
}

Answer 1

我终于明白问题出在哪里了。 在我的 tailwind 配置中，我需要指定我还想将 tailwind 应用于从 MY-LIBRARY 导入的组件。

感谢@JSONDerulo 的交流，让我能够查明来源。

#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: {
            ...
        }
    },
}