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

Question

在本地开发运行Node服务器时，我的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

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

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

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

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

Answer 2

选择器在外部css文件中不会像泛型一样工作。

如果你只在一个文件中使用过滤器，理论上你可以在外部css文件中定义规则，如下所示：

filter: url(http://yourdomain.com/yourwebsite.html#white-glow);

尽管如此，这并没有真正的意义，所以我建议将过滤器也放在一个外部svg文件中，然后在CSS文件中使用外部svg文件的完整url来处理它