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

Question

I am not able to change any font/text colors in my div (using the standard methods), and I think the import of "...theme.scss" is blocking these changes (?), I have never used SCSS. Specifically I want to change just the phone numbers (all) text to red. I can make other changes, so I know the .scss is hooked up. I would like to add the red text to an existing style if possible.

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...

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


p {
    font-family: $font-family;
    font-size: $text-medium;
}

.contact-footer {
    background-color: lightgray;
    padding: 8px;
    margin: 15px;
}
.contact-footer-container {
    display: flex;
    flex-flow: row;
}
.contact-subcontainer {
    display: flex;
    flex-flow: row;
    flex-grow: 1;
}
.contact-card {
    flex-grow: 1;
    padding: 15px;
    padding-top: 0;
}
.contact-card > p {
    line-height: 150%;
}
mat-icon {
    font-size: 18px;
}
a {    
    text-decoration: none;
}

Answer 1

This should work... in component.scss file

.red-text {
color: red;
}

in template

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

if that doesn't work then there's an issue somewhere else in your code, maybe the scss is not being loaded in @Component or something like that.

Answer 2

Check @Component decorator has stylesUrls

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

Answer 3

In order to get this working, you may need to put all imports and global stylings in styles.scss , inside /src/ folder which will be made available globally for your all components, additionally you may define custom classes and use as per requirements. For eg in styles.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;
}

Check if styles.scss is configured properly in angular.json or you can add it for eg:

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

Answer 4

First I agree to suhas that you must import the styles globally ie in styles.scss . On another note, importing theme styling might override you base css changes, specially bootstrap/material themes. If you are not getting any run time error in console, you can check the particular <a> element styles by inspecting the element.

In case you apply any additional class to change the color (eg .color-red ), you must see it in style section of inspect element section and if it is striked-out, meaning your css change is overridden by material css. In such case, you might need to add !important at the end of css rule.

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


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