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

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

0 голосов
/ 09 ноября 2018

Я пытаюсь найти решение, как интегрировать 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 для обработки свойства, значения в качестве аргументов, а затем вернуть отступление + значение с помощью CSS-переменных , но я не уверен, что в будущем нет возможности проблемы с этим, поэтому я буду более счастлив с уже существующим решением (например, CSSNext ).

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

Привет, * +1051 *

striky ..

1 Ответ

0 голосов
/ 26 апреля 2019

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

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

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

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

...