<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]
<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}",
"./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>
1
916
收藏
我终于明白问题出在哪里了。 在我的 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: { ... } }, }