css - 在 Vue 模板文件中的伪元素内容或背景图片中使用 SVG

Question

我不知道如何使用 SVG 文件作为 Vue 模板文件中的伪内容元素。

在我的 Vue 模板文件 (Select.vue) 的作用域 CSS 中，我有:

.wrap {
  &:after {
    content: url("../../assets/icons/caret-down-solid.svg");
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
  }
}

路径是相对于组件位置的。但它不会简单地显示出来。

我尝试过并注意到的事情:

• 我也尝试过在 URL 周围不使用 ""。
• 我曾尝试使用 background-image 和 content: "" 代替，也没有用。
• 它适用于绝对 URL(例如网络上的测试文件)
• 它确实解析了我示例中的本地 URL，因为当我执行 ../../../asserts/icons/caret-down-solid.svg 时，它会采取错误的路径编译失败。

所以看起来文件已解析，语法正确，但由于某种原因没有显示。

编辑 在使用 background-image 检查伪元素时，我看到:

background-image: url([object Module]);

Answer 1

万一有人遇到这个问题，我设法解决了这个问题。问题是我使用的 vue-svg-loader 将 .svg 文件作为模块导入。所以我不得不使用 svg-url-loader 将 svg 导入样式。

在我的 vue.config.js 的 chainWebpack 选项下，我添加了:

config.module.rule("svg")
  .oneOf("inline")
    .resourceQuery(/inline/)
    .use("svg-url-loader")
      .loader("svg-url-loader")
      .end()
    .end()
  .oneOf("external")
    .use("vue-svg-loader")
      .loader("vue-svg-loader");

当你将 ?inline 附加到你的 svg 时，它会用不同的加载器处理它(在这种情况下为 svg-url-loader)

所以在 CSS 中你做:

.wrap {
  &:after {
    content: url("../../assets/icons/caret-down-solid.svg?inline");
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
  }
}

它将正确地内联导入 SVG。