如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目
How to deploy a nuxt.js project with Tailwindcss 2.0 on vercel zeit
我正在尝试使用 tailwind.css 2.0 上传一个基本的 nuxt.js 项目。
我用过:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
安装 tailwindcss 2.0
首先我使用的是 npm,然后是 yarn,但在部署时 tailwindcss 2.0 不起作用。
在本地效果很好。
如果没有更多细节,我真的无法判断,但如果您在生产中遇到困难,但在 tailwindcss 项目的开发中没有遇到困难 - 首先要检查的是您是否使用动态 class 名称(例如,text-${color}-500
)。这些 will be purged 正在生产中,除非您将它们添加到许可名单。
更新
查看了您提供的存储库后,问题似乎出在 Tailwind 生成 CSS 目标 [type='text']
但这被 html-minifier
在生成的 HTML 你的 Nuxt 应用程序(见 issue)。您可以在 nuxt.config
:
中使用此代码关闭此行为
export default {
build: {
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
// this is the only line we're changing from defaults
// but we have to include all as they aren't merged
removeRedundantAttributes: false,
trimCustomFragments: true,
useShortDoctype: true
}
}
}
}
我正在尝试使用 tailwind.css 2.0 上传一个基本的 nuxt.js 项目。 我用过:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
安装 tailwindcss 2.0
首先我使用的是 npm,然后是 yarn,但在部署时 tailwindcss 2.0 不起作用。 在本地效果很好。
如果没有更多细节,我真的无法判断,但如果您在生产中遇到困难,但在 tailwindcss 项目的开发中没有遇到困难 - 首先要检查的是您是否使用动态 class 名称(例如,text-${color}-500
)。这些 will be purged 正在生产中,除非您将它们添加到许可名单。
更新
查看了您提供的存储库后,问题似乎出在 Tailwind 生成 CSS 目标 [type='text']
但这被 html-minifier
在生成的 HTML 你的 Nuxt 应用程序(见 issue)。您可以在 nuxt.config
:
export default {
build: {
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
// this is the only line we're changing from defaults
// but we have to include all as they aren't merged
removeRedundantAttributes: false,
trimCustomFragments: true,
useShortDoctype: true
}
}
}
}