导入外部CSS文件的CSS变量后无法访问，背景图不显示

问题根源 #

你在style.css中给CSS变量--customImg赋值时额外添加了双引号，导致URL被解析为包含引号的无效路径，同时需确认导入路径和变量使用方式是否正确。

修正步骤 #

1. 修正style.css的变量定义 #

去掉URL两侧的双引号，因为CSS变量作为URL值时不需要额外引号：

:root {
    --customImg: https://initiate.alphacoders.com/images/133/stretched-1920-1080-1330237.png?7641;
}

2. 调整theme.css的变量使用（可选） #

如果Discord主题要求背景图变量需通过url()包裹，修改theme.css如下：

@import './style.css';

:root {
   /* Background image variable */
   --background-image: url(var(--customImg));
 }

3. 额外检查项 #

• 确认@import './style.css';的路径正确，确保两个CSS文件在同一目录下
• 验证Discord主题的目标元素是否正确引用了--background-image变量，例如：

  .discord-background-element {
      background-image: var(--background-image);
  }
  

内容的提问来源于stack exchange，提问作者risco1bolota