Как заставить 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-файл, а затем обратиться к нему с полным URL-адресом к внешнему SVG-файлу в вашем CSS-файле