Add SCSS File to the Stackblitz

Add scss file to the Stackblitz

Scss should work in stackblitz:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ './home.scss' ] <== add this
})
export class HomePage {

Styles like

 page-home {
 .buttoncls {

won't work for you with default encapsulation(ViewEncapsulation.Emulated) because page-home is not part of home component template and angular adds attribute like [_ngcontent-c0] to styles.

So we can change page-home to ion-list and see how it works:

Stackblitz Example (ViewEncapsulation.Emulated)

But we can disable encapsulation:

encapsulation: ViewEncapsulation.None

Stackblitz Example (ViewEncapsulation.None)

See also this thread

https://github.com/stackblitz/core/issues/1

As EricSimons commented 9 days ago:

Hey all! We just shipped SASS and LESS support, and we also support
the angular-cli.json config too :)

Separate SCSS and HTML in Angular

Add test-class to your element:

<div class="test-class">
  <button mat-mini-fab>
    <mat-icon>delete</mat-icon>
  </button>
</div>

Second is your style should just be absolute, not 'absolute':

.test-class {
  position: absolute;
  z-index: 10;
  right: 0;
}

See here: https://stackblitz.com/edit/angular-ivy-z8wfaj?file=src%2Fapp%2Fapp.component.scss

Why is @use in my scss files not working in my Angular 9.1.0 project?

I have finally been able to solve this issue.

• I upgraded to Angular version 10.0.8 by using the ng update tool as documented here
• I removed node-sass as a dev dependency from my project

css styling not being applied

All the code you have setup works when it is run locally. The problem may be that StackBlitz does not support the linking of CSS files (has not since at least 2017) have a look at the issue here https://github.com/stackblitz/core/issues/133

Mime type error when Importing CSS in Stackblitz

The error is in your html. The href tag is inside your path.

Change the link to :

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" 
      rel="stylesheet"
      type="text/css">

Telling Angular to serve `styles.css` instead of `styles.scss`

Edge

When you open up styles.scss by clicking on it in the styles tab of your devtools in Edge, you can just select the format you want in the tabs above the stylesheet it presents to you. I you can't see it you can click the >> arrows to show the option in a dropdown.

However, you will only see the global styles there. Not the component styling.

Click on the styles.scss on the right:

Select whatever presentation you prefer in the tabs:

Chrome

Go to devtools settings and disable CSS sourcemaps. (Second column, next to last check mark.)

Now you will see styles.css only in the right of your styles tab.

SCSS not working IONIC2/3 project

For separate SCSS you have to use selector.

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss']
})

SCSS

Selector from @Component and Parent class of SCSS file must be same.

.page-home {
  p {
    font-size: 100px !important;
    color: red;
  }
}

GLOBAL SCSS

You can use SCSS from APP.SCSS file. No selector is required for this.

Import Error on Stackblitz when trying to add component to module file

Update below Changes, because it's in different folder

import { HeroesComponent } from '../heroes/heroes.component';

---

Related Topics