未应用Sass生成的类

Question

我有一个自定义的sass设置和bootstrap 5和一堆我自己的SCSS文件，所有这些都是使用gulp在style.css中编译的。我有一个_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和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没有任何效果，这个类不会被应用。

我该如何解决这个问题？请帮帮我！

Answer 1

首先，如果您确定在CSS文件中看到了正确的选择器和正确的规则:应该应用它。因此，规则应该在浏览器控制台中可见(即使被覆盖)。

如果您在CSS文件中看到它，但未在浏览器控制台中应用:请检查您的CSS文件是否有效(以及您的gulp生产脚本是否编译良好)，因为一个不好的字符可能会弄乱它的某些部分。

如果您在浏览器控制台中看到您的CSS，但它被某些引导程序规则覆盖，您可以覆盖bootsrap变量，并更改引导程序颜色，如下所示(在此之前导入引导程序)：

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

您也可以尝试这样做，用您的值替换bootstrap值：

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

Answer 2

简单的答案是：

以预期的方式使用Bootstrap 5！

Bootstrap是一个复杂的框架。所有大量的类一起工作，包括覆盖颜色设置，如果提供并使用了预期的方式。在您的代码示例中，如果您以Bootstrap的方式使用Bootstrap，那么您将额外创建Bootstrap提供给您的帮助器类。因为你没有这样做，它导致了不容易处理的冲突…而且几乎不可能在没有分析页面本身的情况下解决。

以下是您可以检查的内容：

您可以检查:是否有其他类阻止了您的类？

在您的示例中，您使用!important来获得更高的细节。但是颜色被其他类覆盖了。

也许这就是Bootstrap，它也使用了!important。在这种情况下，您可以尝试将类添加到CSS的末尾(在Bootstrap类之后)，以便在具有相同细节的情况下能够覆盖它们。

附加:在您的示例中，您添加了大量的非引导类。也许这个单独添加的类通过向元素添加比添加的类更具体的颜色(使用!important，这根本不是一种好的技术)来阻止您的样式。

在这种情况下，同样的解决方案也是可能的。但是带有!important和额外的更高细节(即在选择器中使用两个类名)的单个类将赢得你的助手类的支持，而且你的助手类在你的CSS文件中的后面。

老实说:大多数情况下，只有在浏览器中直接使用开发人员工具才能分析这样一堆类。

，但最好的方法确实是...

执行正确的引导程序主题并使用引导程序类！

1. 你真的不需要自己创建助手类。只需执行一个Bootstrap的SASS设置。并将所需的/附加颜色(或不仅仅是) $colors和也添加到引导图$theme-colors。Bootstrap不是在$colors上而是在$theme-colors上构建helper-/utility-/elements-color-classes。这意味着:这样做的目的是...所有你自己添加到你的项目中的帮助器类将由Bootstrap机制以正确的顺序提供，并避免与你的CSS冲突。
2. 使用Bootstrap类来样式化你的页面。现在，您不需要创建额外的类.case-study { color: gray }。只需使用Bootstrap helper类并将.text-gray添加到相同的元素。(注意:在您的示例中，您使用了数量惊人的9个类来执行相同的样式。在‘卡片中的文本’的情况下，这里有一个很好的提示，如何实现它的引导方式：https://getbootstrap.com/docs/5.0/components/card/#border).

正在考虑使用复杂的框架...

Bootstrap是为了帮助你。因为有很多使用该框架的代码，所以只有在不编写新类的情况下尽可能多地使用这些代码才有意义。因此，使用Bootstrap元素的最好方法是使用Bootstrap元素，并以Bootstrap方式设置它们的样式。这使它变得简单，并避免了冲突。并且:您可以使用这些元素做几乎所有的事情。

如果你需要扩展Bootstrap，也就是附加的类：avoid (deep) nested classes和!important，那么你就可以用简单的助手类来覆盖设置。

Answer 3

我有类似的问题，我的scss被成功地转换成css，但没有应用，在检查了几个小时后，我发现，我写了B大写，而类名是btn，所以当一切都正常时，问题总是出现在你的代码语法中！