Nuxt3 での PROD と DEV の CSS レンダリングに一貫性がない

Question

Tailwind v2 を使用して、Nuxt3 を使用して Vue3 コンポーネント ライブラリ (MY-LIBRARY と呼びます) を構築しました。 私は MY-SIDE-PROJECT というサイドプロジェクトを持っています。これは、laravel-mix (v6) と Vue3 で構築されており、tailwind v2 を使用しています。 Nuxt3 でビルドされた別の Vue3 プロジェクト (My-PROJECT と呼びます) があり、これも tailwind v2 を使用しています。

MY-PROJECT では、MY-LIBRARY のコンポーネントを使用してページをレンダリングします。

nuxt build をトリガーする npm run build スクリプトを使用して実稼働環境でプロジェクトをビルドすると、ページは表示されますが、コンソール、例:

[警告] CSS ネスト構文は、設定されたターゲット環境 (「chrome87」、「edge88」、「es2020」、「firefox78」、「safari14」) ではサポートされていません。 ") [サポートされていないCSSネスト]

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

編集: この問題は解決されました。MY-LIBRARY の CSS は正しくバンドルされていませんでした。

それでも、プロジェクト ページの CSS は正しく解釈されません。

MY-PROJECT 内のページが本番環境でビルドされるときに、MY-LIBRARY からの CSS を適切に提供できるようにしたいと考えています。

MY-PROJECT で nuxt の構成を使用してみましたが、Nuxt3/Vue3 と tailwind v2 の組み合わせについてはインターネット上で十分に文書化されていません。プロジェクトには外部互換性要件があるため、現時点では tailwind3 に実際に移行することはできません。

これは私のプロジェクトの nuxt.config.js ファイルです:

デフォルトのエクスポートdefineNuxtConfig({
    ...
    css: [
        '@/assets/styles/main.scss'
    ]、
    postcss: {
        プラグイン: {
            追い風: {}、
            自動プレフィクサー: {}、
        }、
    }、
    建てる： {
        postcss: {
            postcssOptions: {
                プラグイン: {
                    追い風: {}、
                    自動プレフィクサー: {}
                }
            }
        }
    }
})

これは私のプロジェクトの tailwind.config.js ファイルです:

module.exports = {
    重要: 本当です、
    プリセット: [
        require('MY-LIBRARY/tailwind.config')
    ]、
    パージ: {
        コンテンツ： [
            "./components/**/*.{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：

{
  "名前": "私のプロジェクト",
  「プライベート」: true、
  "スクリプト": {
    "ビルド": "nuxt ビルド",
    "dev": "nuxt dev --port=3000",
    "docker": "npm run dev",
    "生成": "nuxt 生成",
    "プレビュー": "nuxt プレビュー",
    "postinstall": "nuxt の準備",
    "開始": "nuxt 開始"
  }、
  「エンジン」: {
    "ノード": "16.x",
    "npm": "8.x"
  }、
  "依存関係": {
    "マイライブラリ": "^1.1.2",
    "@pinia/nuxt": "^0.4.7",
    "オートプレフィクサー": "^10.4.14",
    "axios": "^1.3.4",
    "ラクソン": "^3.3.0",
    "nuxt": "^3.3.1",
    "nuxt-proxy": "^0.4.1",
    "ピニア": "^2.0.33",
    "サス": "^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",
    "eslint": "^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

ようやく問題がどこにあるのか理解しました。 私の追い風構成では、MY-LIBRARY からインポートされたコンポーネントにも追い風を適用することを指定する必要があります。

@JSONDerulo のやり取りに感謝し、ソースを正確に特定することができました。

リーリー