如何将CSS背景图片加载到管理部分

Question

我正在尝试创建网站的Gutenberg版本，显然，我希望后端编辑器显示与前端相同的视图。所以..我有两个样式表，都放在主题根目录中（并在functions.php中以正确的方式引用（它们工作正常））

1. 前端sass文件（styles.scss）
2. 和后端sass文件（editor-styles.scss）

在两个sass文件中，我都包含一个名为_elements.scss的scss部分，在其中（除其他事项外，我在列表中插入了一些自定义项目符号点：

.default-checklist-item {  //this is a <li> element
  list-style: none;
  line-height: 3rem;
  position: relative;
  padding-left: 4.5rem;
  margin-bottom: 2rem;
  text-align: left;

  &:before {
    content: "";
    background-image: url('icons/custom/checkmark-round.svg');
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: 0;
    top: 0;
    fill: green;
  }
}
所以两个样式表都会从相同的相对路径中提取背景图像，但是显然项目符号不会在编辑器中显示，因为此处的文件路径附加到https://example.com/wp-admin/路径：

1. 在前端，文件正确显示
2. 在编辑器中，https://example.com/wp-admin/显然找不到该文件

我真的很想局部使用同一样式，所以只需要保留一个样式，就不可能使用绝对路径，因为我在本地，临时和现场环境中都可以工作，所以该怎么办？

我正在尝试创建网站的Gutenberg版本，显然，我希望后端编辑器显示与前端相同的视图。所以..我有两个样式表，都放在主题根目录中（和...

Answer 1

怎么样：