javascript - 构建后如何使CSS过滤器在VueJS中工作？

Question

当开发本地运行的节点服务器时，我的 SVG 过滤器可以工作。但是，当我构建它并在服务器上运行它时，它不会。

VueJS 元素正在使用 Webpack。

我这样构建应用程序:

npm run build

我有这样声明的过滤器:

filter: url(#white-glow);

当我构建应用程序时，CSS 位于子文件夹 (/static/css) 中，因此我怀疑它无法再找到过滤器。当我在检查器中检查 HTML 源代码时，SVG 过滤器就在那里。

当我将所述过滤器作为 HTML 中的样式属性应用时，它起作用了。

<button style="filter:url(#white-glow);" data-v-32012fc8="">ｍｕｓｉｃ</button>

编辑:我不能使用上述方法，因为我希望过滤器仅在 :active 状态下处于事件状态，而内联样式属性无法做到这一点。

如何在构建应用后使过滤器在外部 CSS 文件中可用？

Answer 1

我在我的网址前添加了一个斜线。所以现在它在我的 Vue 组件中看起来像这样，并且在构建时解析得很好。现在在组件和构建的 CSS 中看起来像这样:

filter: url('/#white-glow');

我已经在 Firefox 47 和 Chrome 70 中成功测试了这一点。

有人能解释一下为什么会这样吗？