时间戳

首页 > 解决方案 > ASP.NET Core Angular 模板 - 在 ng build --prod 之后不会应用组件样式

angular - ASP.NET Core Angular 模板 - 在 ng build --prod 之后不会应用组件样式

问题描述

重现步骤：

  1. 使用 .NET Core SDK 3.1 (Visual Studio 2019) 创建新的 ASP.NET Core Angular 应用程序
  2. 将新的 CSS 文件 (home.component.css) 添加到主组件
  3. 更新 home.component.ts 以包含新添加的 CSS 文件

.acs-h1 {
  color: blueviolet
}
<h1 class="acs-h1">Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
  <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
  <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
  <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
  <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
  <li><strong>Angular CLI integration</strong>. In development mode, there's no need to run <code>ng serve</code>. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify
    any file.</li>
  <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration automatically invokes <code>ng build</code> to produce minified, ahead-of-time compiled JavaScript
    files.</li>
</ul>
<p>The <code>ClientApp</code> subdirectory is a standard Angular CLI application. If yo**strong text**u open a command prompt in that directory, you can run any <code>ng</code> command (e.g., <code>ng test</code>), or use <code>npm</code> to install extra packages into
  it.</p>

  1. 在本地运行应用程序，应用来自 home.component.css 的样式
  2. 发布和部署应用程序，来自 home.component.css 的样式不适用，此外 nav-menu.component.css 中的任何默认样式都不会应用到已部署的包中

我对 .NET Core SDK 3.0 进行了同样的尝试并得到了相同的结果。

还注意到默认的 ASP.NET Core Angular 模板<body>在 index.html 和 app.component.html 中都有一个标签。我尝试从 app.component.html 中删除它，但没有帮助。

标签： angularasp.net-core

解决方案

推荐阅读