Как изменить отзывчивые контрольные точки в моем приложении с угловой четкостью?

Question

Я искал и не могу найти исчерпывающее руководство о том, как это сделать. У меня есть простое угловое приложение на 5, которое использует интерфейс VMware Clearity UI, и я сгенерировал его с помощью angular-cli и использую css.Я хочу изменить отзывчивые точки останова в сетке здесь: https://vmware.github.io/clarity/documentation/v0.13/grid

Я думал, что это будет обычная задача, задокументированная на веб-сайте ясности VMware, но мне не посчастливилось собрать воедино, как это сделать.

Мой раздел стилей .angular-cli.json выглядит следующим образом:

"styles": [
        "../node_modules/@clr/icons/clr-icons.min.css",
        "../node_modules/@clr/ui/clr-ui.min.css",
        "../node_modules/nouislider/distribute/nouislider.min.css",
        "styles.css"
      ],

Работает нормально.Но теперь мне нужно переопределить отзывчивые контрольные точки.

Я попытался добавить файл main.scss и istalled node-sass и следовать приведенному здесь руководству, чтобы переопределить: https://vmware.github.io/clarity/documentation/v0.11/themes#examples

Однако мое приложение не будет компилироваться, и я даже не будууверен, что это правильный подход.Ошибка: @import "~ bootstrap / scss / normalize";^ Файл для импорта не найден или не читается: ~ bootstrap / scss / normalize

Спасибо за любую помощь, указав мне правильное направление.

Answer 1

Возможно, вы просматриваете разные версии документации, так как 0.11 и 0.13 имеют разные рекомендации по теме.Убедитесь, что вы используете ту же версию документации, что и в вашем коде.0.12+ поддерживает только Angular 6.

Если вы просто хотите изменить точки останова только для таблицы данных, я рекомендую просто написать CSS, который устанавливает новые точки останова, а не пытаться создать весь CSS Clarity.Это становится все труднее поддерживать только для одного переопределения.Я не уверен, что именно вам нужно переопределить, но лучше всего использовать devtools, чтобы найти селекторы, которые изменяют макеты на основе медиазапросов.