从 Angular SCSS 生成 CSS？

Question

当我们使用 SCSS 作为 Angular 的预处理器时，有没有办法看到对应于 SCSS 的 CSS？

这里有一个答案：

它提到使用 --extract-css 选项，但是当我尝试时它看起来已被弃用：

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

想法？

Answer 1

Angular 构建文件中的样式

在您的构建文件中，组件的样式实际上将在 main.js 文件中编译。您可以在浏览器 developertools 的网络选项卡中找到它。

您还会看到一个名为 styles.css 的文件，但它只包含您的全局样式。这是因为每个组件的样式 Angulars view-encapsulation。如果您将 view-encapsulation 策略更改为 here 中解释的 angular 的行为可能会改变：

模拟（默认）
ShadowDOM
None

虽然我不建议这样做。

但是，如果您愿意，可以使用命令行工具将 sass 文件编译成 css，您可以按照 official sass website.

中的说明进行安装

您也可以只使用在线 sass 转换器，例如 thisone。

如果您只对全局样式感兴趣，请参考浏览器中的。

例子

app.component.scss

p {
  background-color: orange;
}

styles.scss

@import 'default';

p {
   color: red;

   &:hover {
      color: blue;
   }
}

default.scss

h1 {
  color: teal;
}

生成结果

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= */"] });

*注意最后一行的橙色background-color。

Answer 2

这只是对已接受答案的补充。我在一篇中型文章中写了它，因为它不是很明显，因为在 Chrome 开发人员工具中选择元素时首先打开 styles.scss，但 styles.css 位于它旁边的选项卡中.

https://fireflysemantics.medium.com/viewing-generated-global-css-for-angular-sass-projects-857a6887ff0b

从 Angular SCSS 生成 CSS？

Generating CSS from Angular SCSS?

css

angular

sass

Angular 构建文件中的样式

例子

生成结果