盖茨比动态样式在生产版本中不起作用

Posted 2023-03-06

【中文标题】盖茨比动态样式在生产版本中不起作用

【英文标题】：Gatsby Dynamic styling not working in production build

【发布时间】：2021-05-03 18:04:04

【问题描述】：

我是 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>

【问题讨论】：

可能不是颜色设置的问题，而是清除问题。也许你没有配置它或其他东西。需要查看你的整个 tailwind.config.js 以及你的工作文件在哪里（我不熟悉 Gatsby）

您是否尝试过将这些样式移至全局样式？

你上一个sn-p有错别字，应该是：<div className=`bg-$color`>。

【参考方案1】：

根据Tailwind + Gatsby docs，有两个重要的声明需要考虑：

在gatsby-browser.js 中为您的 Tailwind 指令添加导入规则 和自定义 CSS，以便在构建中考虑它们。

还有：

注意：默认情况下，PurgeCSS 仅在 build 命令上运行，因为它是 相对缓慢的过程。开发服务器将包括所有 Tailwind 类，因此强烈建议您在构建上进行测试 部署前的服务器。

在您的情况下，问题可能来自 PurgeCSS 指令，因为它不存在，因此它可能正在清除所有样式。修复它：

  // tailwind.config.js
  module.exports = 
   purge: ['./src/**/*.js,jsx,ts,tsx'],
    darkMode: false, // or 'media' or 'class'
    theme: 
      extend: ,
    ,
    variants: 
      extend: ,
    ,
    plugins: [],
  

来源：https://tailwindcss.com/docs/guides/gatsby

或者：

module.exports = 
  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
  theme: ,
  variants: ,
  plugins: [],

来源：https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/

您可以尝试的另一件事是将您的样式移动到 gatsby-browser.js 中的全局样式：

import "tailwindcss/dist/base.min.css"

我假设在您的 gatsby-config.js 中您已经声明了正确的实例：

plugins: [
  
    resolve: `gatsby-plugin-sass`,
    options: 
      postCssPlugins: [
        require("tailwindcss"),
        require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
      ],
    ,
  ,
],

注意：您可以选择添加相应的配置文件（默认为tailwind.config.js）。如果要添加自定义配置，则需要在tailwindcss 之后加载。

【参考方案2】：

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 的回答：我想说真正的问题是，当您在配置中包含 purge 选项时，Tailwind 在构建过程中使用的 PurgeCSS 如何确定在构建过程中要清除的类.

它找到任何匹配正则表达式的字符串：

/[^<>"'`\s]*[^<>"'`\s:]/g

它会天真地找到几乎所有东西，只停留在特定的语法符号处。然后它将尝试保留每场比赛，并清除其余比赛。所以它会找到bg- 和color，保留它们，但会清除bg-color，因为PurgeCSS 的正则表达式没有找到。

来自 TailwindCSS 文档：

这意味着避免在模板中使用字符串连接动态创建类字符串很重要，否则 PurgeCSS 将不会知道保留这些类。

【讨论】：

另一种方法是在 tailwind.config.js 文件中添加“安全列表”选项：purge: content: ['./src/**/*.html', ..........], safelist: ['bg-primary', 'bg-secondary', .... .....],,。在代码中可以继续使用bg-$color

谢谢@robotu！我已将此添加到官方答案中。这是一个很好的解决方案。