Блог

У меня есть настраиваемая настройка sass с bootstrap 5 и куча моих собственных файлов SCSS, все это компилируется в style.css с использованием gulp. У меня есть файл _colors.scss, в котором хранятся все цвета в соответствии с нашим языком дизайна. Мы используем это для создания набора классов, которые можно использовать в любом месте для изменения цветов:

 // Text Colors
$colors: (
  "icon-color": $slate-500,
  'slate-10': $slate-10,
  'slate-40': $slate-40,
  'slate-300': $slate-300,
  "secondary": $secondary-text-color,
  "green": $green,
  "light-green": $green-color,
  "blue": $blue,
  "blue-200": $blue-200,
  "blue-300": $blue-300,
  "blue-400": $blue-400,
  "dodger-blue": $dodger-blue,
  "mariner-blue": $mariner-blue,
  "light-blue": $blue-100,
  "cadet-blue" : $cadet-blue,
  "aqua-10": $aqua-10,
  "gray": $gray,
  "gray-light": $gray-light,
  "light-gray": $gray-100,
  "bright-gray": $bright-gray,
  "gray-200": $gray-200,
  "clay": $clay,
  "clay-10": $clay-10,
  "mandy-pink": $mandy-pink,
  "aqua": $aqua,
  "violet": $violet,
  "white": $white,
  "primary": $primary-text-color
);

@each $color-name, $color-value in $colors {
  .text-#{$color-name} {
    color: $color-value !important;
  }

  .bg-#{$color-name} { 
    background-color: $color-value !important;
  }

  .border-#{$color-name} {
    border-color: $color-value !important;
  }
}
 

Проблема в том, что некоторым классам нравится .text-gray или .text-blue не работает. Я предполагаю, что, поскольку bootstrap также использует переменные, вызываемые gray and blue , они конфликтуют с моими переменными в _colors.scss.

При ближайшем рассмотрении css генерируется правильно (я нашел приведенное ниже объявление в final style.css):

 .case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 {
    color: #69727A!important
}
 

Но использование .text-gray не имеет никакого эффекта, класс не применяется.

Как мне это исправить? пожалуйста, помогите!

Во-первых, если вы уверены, что видите правильный селектор и правильное правило в вашем CSS-файле: оно должно быть применено. Итак, правило должно быть видно в консоли браузера (даже если оно переопределено).

Если вы видите это в своем CSS-файле, но не применены в консоли браузера: убедитесь, что ваш CSS-файл действителен (и что ваш рабочий скрипт gulp компилируется нормально), так как плохой символ может испортить какую-то его часть.

Если вы видите свой CSS в консоли браузера, но он переопределяется некоторыми правилами начальной загрузки, вы можете переопределить переменные bootsrap и изменить цвета начальной загрузки на свои, например, так (импортируйте bootstrap перед этим):

 $theme-colors: (
  primary: #121212,
  success: #8bcea8
  ...
);
 

Вы также можете попробовать это, чтобы заменить значения начальной загрузки на ваши:

 $theme-colors: map-merge($theme-colors, $colors);
 

Простой ответ:
используйте Bootstrap 5 по назначению!

Bootstrap — это сложная структура. Все это огромное количество классов работают вместе, включая перезапись настроек цвета, если они предоставлены и используются по назначению. В вашем примере кода вы дополнительно создаете вспомогательные классы, которые Bootstrap предоставит вам из коробки, если вы используете его как Bootstrap. Поскольку вы этого не сделали, это приводит к конфликтам, с которыми нелегко справиться… и их практически невозможно решить, не имея возможности анализировать саму страницу.

Это то, что вы можете проверить:

Вы можете проверить: существуют ли другие классы, которые блокируют ваши классы?

В вашем примере вы используете !important для получения более высокой специфичности. Но цвет перезаписывается другими классами …

Возможно, это Bootstrap, который !important также использует. В этом случае вы можете попробовать добавить свои классы в конец вашего CSS (после классов начальной загрузки), чтобы они могли перезаписываться в случае идентичной специфичности.

Дополнительно: в вашем примере вы добавили огромную кучу классов, отличных от bootstrap. Возможно, эти отдельные добавленные классы блокируют ваш стиль, добавляя к вашему элементу цвет с более высокой спецификацией (используя !important также, что вообще не является хорошей техникой), чем ваш добавленный класс.

В этом случае возможно то же решение… но отдельные классы с !important дополнительной более высокой спецификацией (т. Е. С Использованием двух имен классов в селекторе) будут преобладать над вашими вспомогательными классами, также ваш вспомогательный класс появится позже в вашем файле CSS.

Честно говоря: чаще всего анализ такого скопления классов действительно возможен только в браузере на странице напрямую с использованием инструментов разработчика.

Но лучший способ действительно был бы…
Создайте правильную тему начальной загрузки и используйте классы начальной загрузки!!!

1. Вам действительно не нужно создавать вспомогательные классы самостоятельно. Просто выполните настройку начальной загрузки SASS… и добавьте необходимые / дополнительные цвета НЕ ТОЛЬКО (или не только) на карту $colors , но И НА карту начальной $theme-colors загрузки. Bootstrap создает классы helper-/ utility-/elements-color не включенными $colors , а включенными $theme-colors . Это означает: делать это таким образом… все ваши вспомогательные классы, которые вы добавили в свой проект самостоятельно, будут предоставлены Bootstrap mechanic в правильном порядке и без конфликтов с вашим CSS.
2. Используйте классы начальной загрузки для оформления вашей страницы. Теперь вам не нужно создавать дополнительный класс .case-study { color: gray } . Просто используйте вспомогательный класс Bootstrap и добавьте .text-gray в тот же элемент. (Примечание: в вашем примере вы используете невероятное количество из ДЕВЯТИ классов для выполнения одного и того же стиля. В случае «текста в карточках» вот хороший намек на то, как реализовать его с помощью начальной загрузки: https://getbootstrap.com/docs/5.0/components/card/#border ).

Просто подумываю об использовании сложной структуры…

Bootstrap выполнен, чтобы помочь вам. Поскольку существует много кода, использующего этот фреймворк, имеет смысл использовать код как можно больше без написания новых классов. Так что лучший способ действительно работать с этим — использовать элементы начальной загрузки и стилизовать их под способ начальной загрузки. Это упрощает и позволяет избежать конфликтов… И: вы можете делать почти все с этими элементами.

И если вам нужно расширить Bootstrap, то есть с помощью дополнительных классов: avoid (deep) nested classes а !important также, чтобы вы могли перезаписать настройки с помощью простых вспомогательных классов.

у меня была похожая проблема, мой scss был успешно преобразован в css, но не применен, после многочасовой проверки я обнаружил, что я написал заглавную букву B, а имя класса было btn, поэтому, когда все работает, проблема всегда в синтаксисе вашего кода!