JupyterLab 4主题自定义Logo时CSS变量使用报错求助

问题描述 #

我正在为JupyterLab 4 notebook-server制作主题，想要替换默认的Jupyter Logo，最终希望能通过外部输入（计划使用CSS的env标识）切换Logo。我认为思路可行，使用了如下CSS代码：

:root {
  --nb-type-url: 'https://example.com/images/my_logo.png';  
}

/* 省略其他代码 */

#jp-MainLogo {
  background-image: url(--nb-type-url);
  background-size: contain;
  background-repeat: no-repeat;
}

/* 省略其他代码 */

但在JupyterLab4主题中运行时出现Webpack相关报错，若硬编码URL则可正常运行。请问是我变量使用方式有误，还是当前系统暂不支持该操作？

解决方案 #

你的CSS变量使用方式有误，具体问题和修正方式如下：

• url()中引用变量需用var()包裹：直接写url(--nb-type-url)会被Webpack当成相对路径解析，导致找不到文件报错。用var()包裹变量后，Webpack会识别这是CSS变量，转而交给浏览器处理。
• 变量定义不要加引号：引号会被当成URL的一部分，导致浏览器无法正确识别图片地址。

修正后的CSS代码：

:root {
  --nb-type-url: https://example.com/images/my_logo.png;  
}

#jp-MainLogo {
  background-image: url(var(--nb-type-url));
  background-size: contain;
  background-repeat: no-repeat;
}

如果后续要通过CSS env标识传入外部值，写法如下（现代浏览器均支持）：

:root {
  --nb-type-url: env(LOGO_URL, https://example.com/images/my_logo.png);  
}

这里env(LOGO_URL, 默认值)表示优先读取环境变量LOGO_URL的值，若未获取到则使用默认的Logo地址。

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