Generating CSS from Angular SCSS?-CodePudding

Is there a way to see the CSS that corresponds to the SCSS when we are using SCSS as the preprocessor for Angular?

There is an answer here: When using angular with scss, how can I see the translated css?

And it mentions using the --extract-css option, however when I try that it looks like it has been deprecated:

sandbox/project $ ng build --extract-css
Unknown option: '--extract-css'

Thoughts?

CodePudding user response：

Styles in Angular Build Files

In your build files the styles of components will actually be compiled in the main.js file. You can find it in the network tab of your browsers developertools.

You will also see a file called styles.css, but this will only contain your global styles. This is because of Angulars view-encapsulation of styles per component. The behavior of angular may change if you change the view-encapsulation strategy as explained here to:

Emulated (default)
ShadowDOM
None

I would not recommend doing that though.

However, if you want you can compile your sass files into css using the command line tool you can install as explained on the official sass website.

You can also just use online sass converters like thisone.

If you are just interested in the global styles here's a reference to How you can switch the format from scss to css in your browser.

Example

app.component.scss

p {
  background-color: orange;
}

styles.scss

@import 'default';

p {
   color: red;

   &:hover {
      color: blue;
   }
}

default.scss

h1 {
  color: teal;
}

Result in Build

styles.css:

h1 {
  color: teal;
}

p {
  color: red;
}

p:hover {
  color: blue;
}

main.js:

AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = /*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 1, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "lib-my-lib");
    } }, directives: [my_lib__WEBPACK_IMPORTED_MODULE_1__.MyLibComponent], styles: ["p[_ngcontent-%COMP%] {\n  background-color: orange;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQuc2NzcyIsIi4uXFwuLlxcLi5cXC4uXFxBbmd1bGFyJTIwUHJvamVjdHNcXGxpYi1leGFtcGxlXFxzcmNcXGFwcFxcYXBwLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usd0JBQUE7QUNDRiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJwIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBvcmFuZ2U7XHJcbn1cclxuIiwicCB7XG4gIGJhY2tncm91bmQtY29sb3I6IG9yYW5nZTtcbn0iXX0= */"] });

*Note the orange background-color in the last line.