在ng构建之后，组件样式会去哪里？

Question

更新到Angular 11引入了一个bug，我的一个CSS样式的不透明度从100%变成了1%。看起来构建过程是这样做的，就像我在本地运行我的应用程序而没有构建一样，样式是正确的。但是在构建之后，样式就改变了。

在运行ng build之后，我刚刚尝试在dist文件夹中的styles.css中查找样式，结果发现样式无处可见。我也检查过其他组件样式，但它们都不在styles.css中。但是，angular材质的所有样式都在那里。

如果我在浏览器中查看，并单击开发工具中的链接来查找更改过的样式所在的文件，它就会出现在我的索引文件头的一些<style>标记中。它们显然是从某个地方注入到index.html中的。

那么它在哪里呢？在运行ng build之后，应用程序组件的所有样式到底到哪里去了？

Angular: 11.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.3
@angular-devkit/build-angular      0.1102.3
@angular-devkit/core               11.2.3
@angular-devkit/schematics         11.2.3
@angular/cdk                       11.2.3
@angular/cli                       11.2.3
@angular/material                  11.2.3
@angular/material-moment-adapter   11.2.3
@schematics/angular                11.2.3
@schematics/update                 0.1102.3
rxjs                               6.6.6
typescript                         4.1.5

Answer 1

样式位于/dist文件夹中的ng build之后的main-es... .js文件中。如果您在运行已构建的应用程序时查看浏览器中的dom，您将在<head>中的一个<styles>标记中看到您的样式。

至于你的不透明度问题，我认为ng build可能会改变样式的顺序，所以你可以试着让它成为!important；或者如果你添加像div.my-style { ...这样的东西而不是.my-style { ...，它就会提升它的重要性。

如果您碰巧尝试使用百分比，也可能是css opacity的范围从0.0到1.0。