Angular 7 - Пользовательские свойства CSS (Переменные CSS)

Question

Я пытаюсь найти решение, как интегрировать polyfill/fallback для CSS-переменных в проект, который использует новейшую версию Angular (7.0.1) с Angular Material (7.0.2). Проблема в том, что ng eject в данный момент отключен, поэтому я не могу редактировать конфигурацию для Autoprefixer, который использует PostCSS, для которого уже существуют плагины, которые делают откат для старых браузеров.

Что я нашел:

CSS Vars Ponyfill

• Библиотека JS для просмотра встроенных стилей, <styles> или же <link> HTML-тег, но для использования этого я должен включить watch вариант этого плагина, что означает, наблюдая за любыми изменениями в DOM (мне не нравится это решение)

CSS Next

• плагин для PostCSS (используется в Angular build как Autoprefixer). Я думаю, лучшее из возможных решений, но в настоящее время я не в состоянии редактировать конфигурацию build/webpack.

Что я могу сделать:

• конечно, я могу создать собственный @mixin в .scss для обработки свойства, значение в качестве аргументов, а затем возвращение fallback + value с помощью CSS-переменных, но я не уверен, что в будущем не будет возможных проблем с этим, поэтому я буду более счастлив с уже существующим решением (например, CSSNext).

У вас есть идея, как достичь этой цели? Спасибо.

С Уважением,

strik y..

Answer 1

Автор css-vars-ponyfill здесь.

Вам не нужно включать watch возможность использовать ponyfill с вашим приложением Angular. При желании вы можете вызвать его вручную в любое время (после изменения темы, изменения маршрута, подключения компонентов и т. Д.). Вариант с часами - это просто приятный вариант "установи и забудь", который большинство людей предпочитают за его простоту.

Недавно была выпущена версия 2.x ponyfill, которая поддерживает инкрементные обновления и, следовательно, предлагает хороший прирост производительности по сравнению с 1.x.

Надеюсь это поможет. Не стесняйтесь открывать вопрос на GitHub, если у вас есть какие-либо вопросы или вы хотели бы обсудить их дальше.