从 Angular SCSS 生成 CSS？

Ole 发表于 Dev

是

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

这里有一个答案：当使用 angular 和 scss 时，我怎样才能看到翻译后的 css？

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

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

想法？

更新

这只是对已接受答案的补充。我把它写在一篇中型文章中，因为它不像styles.scss第一次打开那样立即显而易见，但styles.css就在它旁边。

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

H3AR7B3A7

Angular 构建文件中的样式

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

您还将看到一个名为的文件styles.css，但这只会包含您的全局样式。这是因为 Angulars 对每个组件的样式进行了视图封装。如果您将视图封装策略更改为如下所述，则角度的行为可能会改变：

模拟（默认）
ShadowDOM
没有任何

我不建议这样做。

但是，如果您愿意，可以使用命令行工具将 sass 文件编译成 css，您可以按照官方 sass 网站上的说明进行安装。

您也可以只使用像thisone这样的在线 sass 转换器。

如果您只是对全局样式感兴趣，请参考如何在浏览器中将格式从 scss 切换为 css。

例子

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

*注意最后一行的橙色背景颜色。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。