gatsby - 盖茨比动态样式在生产版本中不起作用
问题描述
我是 Gatsby 的新手,我正在使用带有 postcss 的 tailwind css。我在tailwind.config.js 的主题对象中定义的一些颜色配置在开发环境中有效,但在生产环境中无效。我已经尝试清理缓存并删除公用文件夹并重新构建它。那并没有解决问题。我在tailwind.config.js 中的主题对象是这样的:
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
primary: {
DEFAULT: '#4F9C3A',
900: '#25441c',
},
secondary: {
0: '#ff9563',
DEFAULT: '#E66437',
9: '#ae3409',
},
footer: {
light: '#e66437',
DEFAULT: '#383e42',
dark: '#26292c',
},
neutral: {
0: '#ffffff',
DEFAULT: '#ffffff',
1: '#fafafa',
9: '#000000',
},
accent: {
1: '#388ac5',
DEFAULT: '#293842',
},
brown: {
DEFAULT: '#C9AC75',
2: '#44261c',
},
black: '#000000',
}
}
更新:我已经能够查明问题的根源。我正在使用 gatsby-transformer-json 从 json 文件中获取要应用的类名。我有类似下面的代码段来设置在开发环境中工作但不在生产环境中工作的背景颜色。
<div className={`bg-${color}>
The development build shows proper background color for this segment but production build does not.
</div>
解决方案
TLDR:
当您使用 tailwind.config.js 中的选项时,不要在类名中使用字符串连接purge
。相反,提供完整的类名。
来源:https ://tailwindcss.com/docs/optimizing-for-production
2021 年 3 月 1 日更新
感谢 @robotu 为您带来了另一个不错的选择:您可以safelist
向文件中添加一个选项tailwind.config.js
,如下所示:
module.exports = {
// ...
purge: {
content: ['./src/**/*.html'],
safelist: ['bg-primary', 'bg-secondary']
}
}
原始 OP 代码/意图
你已经这样做了:<div className={`bg-${color}`>
但是 TailwindCSS 更喜欢这样的东西:<div className={ color === "red" ? "bg-red" : "bg-blue" }>
我的猜测是,如果您有许多可能的颜色,您可能会使用返回完整类名的函数/钩子,但我还没有测试过。
更长的版本:
您没有向我们展示您的完整 tailwind.config.js 文件,但我假设您在其中purge
某处使用该选项。
继续 Ferran 的回答:我想说真正的问题是,当您在配置中包含选项时,Tailwind 在构建过程中使用的 PurgeCSS 如何purge
确定在构建过程中要清除的类。
它查找与正则表达式匹配的任何字符串:
/[^<>"'`\s]*[^<>"'`\s:]/g
它会天真地找到几乎所有东西,只停留在特定的语法符号处。然后它将尝试保留每场比赛,并清除其余比赛。所以它会找到bg-
并color
保存它们,但会清除bg-color
,因为 PurgeCSS 的正则表达式没有找到。
来自 TailwindCSS 文档:
这意味着避免在模板中使用字符串连接动态创建类字符串很重要,否则 PurgeCSS 将不知道保留这些类。
推荐阅读
- php - 从自定义 url 链接将购物车商品数据添加到 woocommerce
- c++ - 移动鼠标时 QCursor::setPos() 不起作用
- swift - 使用 Swift 在 macOS 的 NSStatusBar 上显示图标和文本
- php - Phpinfo() 在 NginX 更新后显示旧 PHP 版本
- javascript - 为什么我的 nodeJS 中的 console.log 没有给出正确的结果?
- r - R:如何使用 geom_point 将点添加到并排错误栏
- nginx - 如何在没有 RedHat 模块的情况下安装 nginx
- java - KeyStore API 抛出错误:java.security.KeyStoreException: BCFIPS JKS 存储是只读的,仅支持证书条目
- python - 与线程共享的内存
- php - pecl 无法创建锁定文件