时间戳

首页 > 解决方案 > ng build 之后组件样式去哪了？

angular-cli - ng build 之后组件样式去哪了？

问题描述

更新到 Angular 11 引入了一个错误，其中我的一个 CSS 样式的不透明度从 100% 更改为 1%。看起来构建过程正在这样做，就好像我在本地运行我的应用程序而不构建一样，样式是正确的。但是在构建后样式发生了变化。

我刚刚尝试styles.css在运行后在我的 dist 文件夹ng build中找到样式，发现样式无处可见。我也检查了其他组件样式，但它们都不存在于styles.css. 然而，所有有角材料的造型都在那里。

如果我在浏览器中查看，然后单击开发工具中的链接以查找更改样式所在的文件，它会出现在<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

标签： angular-cli

解决方案

样式进入main-es... .js文件/dist夹中的文件ng build。如果您在运行构建的应用程序时查看浏览器中的 dom，您将<styles>在<head>.

至于您的不透明度问题，我想ng build可能是更改样式的顺序，因此您可以尝试制作!important；或者如果你添加类似的东西div.my-style { ...而不是.my-style { ...，它会增加重要性。

如果您碰巧尝试使用百分比，也可能是 cssopacity是 from range 0.0to 。1.0

推荐阅读