Nuxt3中的PROD和DEV CSS渲染不一致
P粉336536706
P粉336536706 2023-08-27 09:48:04
[CSS3讨论组]
<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 ("chrome87", "edge88", "es2020", "firefox78", "safari14") [unsupported-css-nesting] &lt;stdin&gt;:1:62181: 1 │ ...-cell}@media (min-width:1024px){&amp;--bordered-max-lg,&amp;--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}", "./pages/**/*.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> <pre class="brush:php;toolbar:false;">{ "name": "MY-PROJECT", "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev --port=3000", "docker": "npm run dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", "start": "nuxt start" }, "engines": { "node": "16.x", "npm": "8.x" }, "dependencies": { "MY-LIBRARY": "^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", "prettier": "^2.8.4", "sass-loader": "^13.2.2" }, "overrides": { "vue": "latest" } }</pre> <p><br /></p>
P粉336536706
P粉336536706

全部回复(1)
P粉300541798

我终于明白问题出在哪里了。 在我的 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: {
            ...
        }
    },
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号