当SCSS在Angular 8中具有导入的样式表时，如何使用SCSS更改字体颜色？

我无法更改div中的任何字体/文本颜色（使用标准方法），我认为导入“…theme.scss”会阻止这些更改（？），我从未使用过scss。具体来说，我只想将电话号码（全部）文本更改为红色。我可以进行其他更改，因此我知道.scs已连接。如果可能，我想将红色文本添加到现有样式中

html

<div class="contact">
  <h1>Contact Us</h1>
  <div class="contact-footer">
    <p><strong>For any other questions, please contact...</strong></p>
    <div class="contact-footer-container">
      <div class="contact-subcontainer">
      <div class="contact-card"><p>Publications<br>Phone: <a href="tel:1-800-123-4567">1-800-123-4567</a><br> <a href="some@something.com">some@something.com</a></p></div>
      <div class="contact-card"><p>Product Support<br>Toll-Free: <a href="tel:1-800-123-4567">1-800-123-4567</a><br>
        Direct: <a href="tel:1-000-123-4567"> 1-000-123-4567</a><br> Fax:  1-000-123-4567
    </div>
    </div>
  </div>
</div>

这应该有用。。。 在component.scss文件中

.red-text {
color: red;
}

模板中

<a href="tel:1-800-123-4567" class="red-text">1-800-123-4567</a>

---

如果这不起作用，那么代码中的其他地方就有问题，可能SCS没有加载到@Component或类似的东西中。

检查

@Component

装饰器有

样式

@Component({
  selector: 'main-comp',
  templateUrl: './maincomp.component.html',
  styleUrls: ['./maincomp.component.scss']
})

为了使这项工作正常进行，您可能需要将所有导入和全局样式放在style.scss中的/src/文件夹中，该文件夹将为您的所有组件提供全局可用性，此外，您还可以根据需要定义自定义类和使用。例如，在样式中。scss：

/* Global styles and imports */

@import '~@angular/material/theming';
@import '../../some-material-theme.scss';

/* General styles */

.color-red {
    color: red;
}

.color-orange {
    color: orange;
}

.color-green {
    color: green;
}

检查angular.json中是否正确配置了style.scss，或者您可以添加它，例如：

"build": {
    "options": {
         ....,
         "index": "src/index.html",
         "styles": ["src/styles.scss"],
         ....
             }
         }

首先，我同意suhas的观点，即必须全局导入样式，即在
styles.scss
中导入样式。另一方面，导入主题样式可能会覆盖基本css更改，特别是引导/材质主题。如果控制台中没有任何运行时错误，可以检查特定的

//SCSS
.红色{
颜色：红色！重要；
}
这确实对我有用，谢谢。我想我可以将红色添加到一个现有的样式/类中，但无法实现。感谢您指出导入主题可能会覆盖基本css，以及如何通过检查进行检查，非常有用。
"build": {
    "options": {
         ....,
         "index": "src/index.html",
         "styles": ["src/styles.scss"],
         ....
             }
         }

// HTML
<a class="color-red" href="tel:1-000-123-4567"> 1-000-123-4567</a>


// SCSS
.color-red {
  color: red !important;
}