css 顺风自定义背景-图像不工作在生产

bq3bfh9z 于 2023-06-07 发布在其他

关注(0)|答案(3)|浏览(255)

在我的CRA项目中，我通过编辑tailwind.config.js文件的theme.backgroundImage部分添加了自己的背景图像。图像显示在本地，但不在生产中。在生产中，类（例如bg-1989）被应用，但似乎没有添加background-image属性。

// tailwindcss.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: theme => ({
        '1984':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1984.jpg')",
        '1989':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1989.jpg')",
        '1997':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1997.jpg')",
        '2003':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2003.jpg')",
        '2014':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2014.jpg')",
        '2019':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2019.jpg')",
        '2020':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2020.jpg')"
      })
    }
  }
};

我使用它们如下：

<div className={`hero-image bg-${year.id}`}>
          <div className="small-headline text-white absolute w-full scene-name">
            <Container className="grid__container">
              <Row className="grid__row">
                <Col lg={2} />
                <Col lg={6}>{year.title}</Col>
                <Col lg={4}>{year.id}</Col>
              </Row>
            </Container>
          </div>
        </div>

// package.json
{
  "name": "on-borrowed-time",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.17.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-grid-system": "^7.1.1",
    "react-html-parser": "^2.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  .
  .
  .
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "prettier": "^1.19.1",
    "sass": "^1.30.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
  }
}

css

来源：https://stackoverflow.com/questions/68120879/tailwind-custom-background-image-not-working-in-production

3条答案

按热度按时间

piv4azn71#

据我所知，tailwind只会加载只使用的类，而不会加载所有的类。由于您是在运行时动态更改类的，因此有些类是您没有的。为了解决这个问题，你可以用动态类添加div。

<div className={"bg-1984 hidden"}> </div>
<div className={"bg-1989 hidden"}> </div> 
<div className={"bg-1997 hidden"}> </div> 
<div className={"bg-2003 hidden"}> </div> 
<div className={"bg-2014 hidden"}> </div>
<div className={"bg-2019 hidden"}> </div>
<div className={"bg-2020 hidden"}> </div>

这对我来说是可行的，但我不知道是否有更好的解决方案。

赞(0）回复(0）举报 2023-06-07

mgdq6dx12#

创建一个动态生成的类名的安全列表，以便在运行时使用。

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-1984',
    'bg-1989',
    // ...
    'bg-2020',
  ],
  // ...
};

赞(0）回复(0）举报 2023-06-07

n3h0vuf23#

我认为Reggie的安全列表解决方案可以很好地解决生产中的这个问题。然而，我首先要确保你不是像bg-${year.id}那样动态生成类，而是想在之前定义它，并将变量实现为一个完整的类，如docs所示：https://tailwindcss.com/docs/content-configuration#dynamic-class-names
除了bg-${year.id}，你还可以使用类似这样的内联代码：

{year.id === 1984 ? 'bg-1984' : ''}

您保留了动态显示背景的能力，而tailwind将选择整个类名。否则，它将非常不一致地工作。
在你的例子中，你可能有太多的选项（年），你想在一个函数中生成这个，而不是内联。

赞(0）回复(0）举报 2023-06-07

我来回答

css 顺风自定义背景-图像不工作在生产

3条答案

相关问题

热门标签

最新问答