Angular 6 Not Applying SCSS Styles

Angular: Component scss styles not applied to tags supplied to [innerHTML] of div?

You should disable encapsulation for that component. You can do it like this:

import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

Angular styles from styles.scss are not always being applied

Probably the css of material buttons is loaded after your classes from style.scss and the selectors have the same importance so the later loaded win and overwrite the definitions, which are in both classes.

What should work is e.g increasing the importance of your specific definitions by combining classes

.mat-button {
  &.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
 }
}

.mat-button.menu-button will have precedence over just .mat-button

The other solution would be to create your own button component which wraps the material button. You would put the custom css there and could reuse it easily within the app.

Angular style not applied to component

For anyone that might face this problem in the future, this might be due to a missing styleUrls array within @Component decorator of the component.

@Component({
  selector: 'my-second-component',
  templateUrl: './my-second-component.component.html',
  styleUrls: ['./my-second-component.component.css'] <-- This was missing
})

angular not recognizing styles.scss and therefore angular-notifier is not working

put "src/styles.scss" inside styles array in angular.json

"styles": ["src/styles.scss"],

Sass styles not applied with Angular CLI v1.7.3 Console says strict MIME checking enabled

I have analysed little bit more on your issue. Looks like your angular.json file is corrupted. I have corrected the issues and included the scss styling in schematics. So Please use the following angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "first-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/first-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
           "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "first-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "first-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "first-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "first-app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "first-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "first-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "first-app"
}

The above will work definitely. But to avoid the same error in future. I recommend the following steps

Update your angular CLI again.
When you are creating new project using angular cli. You should follow the
ng new second-app --style=scss
For your existing project try running the following command to convert your css to scss
ng set defaults.styleExt scss

By following the first two steps will rectify your scss error. But the third step is also essential in case if you are switching from css to .scss.

Hope it helps and will work.

Style.css of Angular not applying to certain Component

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied.
Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule.
Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

You can see which properties won by clicking Computed style tab:

Or try to move these styles to the bottom of style.css file:

.content-body a {
    cursor: pointer;
    text-decoration: none;
    color:  #4c90c7
}

.content-body a:hover {
    color: #346092;
}

.content-body a:visited {
    text-decoration: none;
    color: #4c90c7
}

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

<a href="javascript:;">Button</a>

Angular don't apply styles

h1 { color: #ffffff;}

.description {
    font-style: italic;
    color: green; 
}

Hope this help. Thanks!