Nuxt3中的PROD和DEV CSS渲染不一致

Question

<p>我使用 Nuxt3 建立了一個 Vue3 元件庫（我們稱之為 MY-LIBRARY），其中使用了 tailwind v2。 我有一個名為 MY-SIDE-PROJECT 的副項目，使用 laravel-mix (v6) 和 Vue3 構建，它使用 tailwind v2。 我還有另一個使用 Nuxt3 建置的 Vue3 專案（我們稱之為 My-PROJECT），也使用 tailwind v2。 </p> <p>在 MY-PROJECT 中，我使用 MY-LIBRARY 中的元件來渲染頁面。 </p> <p>當我使用觸發<code>nuxt build</code> 的<code>npm run build</code> 腳本在生產中建立我的專案時，我的頁面已提供服務，但我的頁面已提供服務，但我的頁面已提供服務，但我的控制台中出現警告，例如：</p> <pre class="brush:php;toolbar:false;">[WARNING] CSS nesting syntax is not supported in the configured target environment ("87", "edge88", "es2020", "firefox78", "safariari ") [unsupported-css-nesting] <stdin>:1:62181: 1 │ ...-cell}@media (min-width:1024px){&--bordered-max-lg,&--hidden-max... ╵</pre> <p><strong>編輯：此問題已解決，MY-LIBRARY 的 CSS 未正確捆綁。 </strong></p> <p><strong>仍然，我的專案頁面中的 CSS 未正確解釋。 </strong></p> <p>我希望 MY-PROJECT 的頁面能夠在生產中建置時正確地提供 MY-LIBRARY 中的 CSS。 </p> <p>我已經嘗試在 MY-PROJECT 中使用 nuxt 的配置，但是 Nuxt3/Vue3 和 tailwind v2 的組合在互聯網上沒有很好的記錄。我暫時無法真正轉向 tailwind3，因為該專案有一些外部相容性要求。</p> <p>這是我的專案的 nuxt.config.js 檔案：</p> <pre class="brush:php;toolbar:false;">export default defineNuxtConfig({ … css: [ '@/assets/styles/main.scss' ], postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, build: { postcss: { postcssOptions: { plugins: { tailwindcss: {}, autoprefixer: {} } } } } })</pre> <p>這是我的專案的 tailwind.config.js 檔案：</p> <pre class="brush:php;toolbar:false;">module.exports = { important: true, presets: [ require('MY-LIBRARY/tailwind.config') ], purge: { content: [ "./components/**/*.{js,vue,ts}", “./頁/**/*.vue", "./nuxt.config.{js,ts}", "./app.vue", ] }, theme: { extend: { … } }, variants: { … } }</pre> <p>我已經嘗試在 MY-PROJECT 中加入 postcss.config.js 但它沒有改變任何東西。 </p> <p>如果您對如何解決我的問題有任何建議，我將非常感激！ 提前致謝。 </p> <p><strong>編輯：</strong> 嘗試了一些事情后，看來主要問題是命令<code>npm run dev</code>（本地運行）和<code>npm run build ; npm run start</code> （部署時，但我也在本地重現）渲染不均勻。 CSS 的渲染方式並不類似。這是我專案的package.json：</p>

{
  “名稱”：“我的專案”，
  「私人」：真實，
  「腳本」：{
    “構建”：“nuxt構建”，
    “dev”：“nuxt dev --port = 3000”，
    “docker”：“npm run dev”，
    “生成”：“nuxt生成”，
    "preview": "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",
    "pinia": "^2.0.33",
    “薩斯”：“^1.60.0”，
    "tailwindcss": "^2.2.17",
    "不明飛行物": "^1.1.1",
    "vue-i18n": "^9.2.2",
    "vue3-lottie": "^2.5.0"
  },
  「開發相依性」：{
    "@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”：“最新”
  }
}</pre>
<p><br />></p>

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