CSS变量多次加载svg文件答案

【问题标题】：CSS Variable loading svg file multiple timesCSS变量多次加载svg文件
【发布时间】：2020-09-09 20:15:15
【问题描述】：

我在 CSS/SCSS 中使用变量。我想设置背景（使用 SVG 文件），但每次导航或执行其他操作时都会重新加载。

我的 -Variables.scss 文件：

:root {
  --backgroundTheme: url('triangle-dark.svg') no-repeat;
}
$variables: (
  --backgroundTheme: var(--backgroundTheme)
);

我的 style.scss 文件：

@import "~assets/_variable";

body:before {
  background-size: cover;
  background: var(--backgroundTheme);
}

如何避免多次加载此文件？

PS：这是一个 Angular 8 项目。

【问题讨论】：

【解决方案1】：

我最近遇到了同样的问题。这是由检查器引起的 - “禁用缓存”已启用：

您只需取消选中它，它就会停止发出新请求。

【讨论】：

【解决方案2】：

要在 DOM 中多次使用图像，并且只有一次来自 CSS 的请求，您应该使用伪元素目标的 content 属性来呈现图像：

body::before {
  content: var(--backgroundTheme, 'alt text');
}

虽然您可能需要另一种方法来处理图像。它可能不适合你。

【讨论】：

【解决方案3】：

我有两个可能的想法，不确定它们是否适合您，但很容易检查：

如果可以，不要使用 css 变量，而是使用 scss。我的一般方法是创建一个settings.scss 文件，并在需要时将其导入其他文件中。这是个人喜好，我觉得这样更容易管理。
也可能是后端出了点问题，缓存标头设置是否正确？您可以通过单击 tringle-dark.svg、Headers 选项卡，然后单击 Response Headers 在 Chrome 本身中进行检查。

【讨论】：