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

【问题标题】：How to make CSS filter work in VueJS after building?构建后如何使 CSS 过滤器在 VueJS 中工作？
【发布时间】：2019-04-12 14:40:48
【问题描述】：

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

VueJS 项目正在使用 Webpack。

我这样构建应用程序：

npm run build

我有这样声明的过滤器：

filter: url(#white-glow);

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

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

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

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

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

【问题讨论】：

【解决方案1】：

选择器在外部 css 文件中不会像通用那样工作。

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

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

虽然，这并没有什么意义，所以我建议也将过滤器放在一个外部 svg 文件中，然后在你的 CSS 文件中使用外部 SVG 文件的完整 URL 来处理它

【讨论】：

谢谢！在浏览器的检查器中完成后，我可以确认此操作有效。但是，我还没有尝试使用该路径构建它。
我找到了一个类似于你给出的修复。我尝试在 HTML 中包含适用于根路径的 SVG，并使用前面的斜杠“修复”。一旦我弄清楚如何使用相对路径来解决它，就可以将 SVG 作为单独的资产工作。 CSS-loader 将其转换为 base64 字符串，以便在构建后整齐地包含在 CSS 本身中。

【解决方案2】：

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

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

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

谁能解释一下为什么会这样？

【讨论】：