从 Angular SCSS 生成 CSS

发布于05月31日

当我们使用SCS作为Angular的预处理器时，是否有办法查看与SCS相对应的CSS？

这里有一个答案:

它提到了使用--extract-css选项，但当我try 时，它似乎已被弃用:

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

思想？

Angular 构建文件中的样式

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

您还将看到一个名为styles.css的文件，但它只包含您的全局样式.这是因 for each 组件的样式的Angular 视图封装.如果将视图封装策略(如here所述)更改为:

仿真(默认)
阴影区
没有一个

I would not recommend doing that though.

但是，如果需要，可以使用命令行工具将sass文件编译成css，您可以按照official sass website上的说明进行安装.

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

如果您对全局样式感兴趣，请在浏览器中参考How you can switch the format from scss to css.

实例

应用程序.组成部分scss公司

p {
  background-color: orange;
}

样式.scss公司

@import 'default';

p {
   color: red;

   &:hover {
      color: blue;
   }
}

违约scss公司

h1 {
  color: teal;
}

生成结果

样式.css:

h1 {
  color: teal;
}

p {
  color: red;
}

p:hover {
  color: blue;
}

主要的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.