如何在非 cli 角度项目中使用全局 css？

Question

我将 ASP.NET MVC 作为服务器，将 Angular 作为客户端应用程序。

我没有静态 index.html，但它是 index.cshtml。我使用的样式是全局样式，而不是组件范围。

我的问题是如何使用 angular/webpack 和 MVC 处理 scss 样式文件（一堆）？

是否必须在 app.component 文件中手动导入“全局样式文件”？我对像引导程序这样的供应商 css 文件做同样的事情吗？

最佳做法是什么？我的想法如下：

    import { Component } from '@angular/core';

    import '../styles/myglobalStyles.css'
    import '../styles/boostrap.min.css'
    import '../styles/otherVendors.min.css' 

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html'
    })
    export class AppComponent { }

另一个问题是在 ANGULAR CLI 设置中，所做的是在angular-cli.json 文件中添加以下内容。它有什么作用？它是否在构建期间将styles.css 文件添加到app.component.html？ （您能指出任何来源/文档吗？）

],
"styles": [
   "src/styles.css"
],

Answer 1

您应该使用 webpack 捆绑所有 scss 文件并将所有 scss 文件转换为 css，然后将其提取到文件调用 lib.css 然后将其包含在 Layout.cshtml 中，因为它是您应用程序的全局样式。也许为了提高你可以使用第三方库来丑化你的 css 代码也可以提高性能

干杯

Answer 2

组件样式 styleURL 元数据中引用的样式、组件模板中的内联样式或导入到组件中的样式启用 CSS 封装，这意味着它们的范围仅限于单个组件以防止冲突。

@Component({
  selector: 'comp',
  templateUrl: './comp.component.html',
  styleUrls: ['./comp.component.css']
})

样式范围文档https://angular.io/guide/component-styles#style-scope

要创建将应用于任何元素的全局样式规则，您可以添加其他样式文件，包括将供应商 css 到 agular.json，该文件将由 webpack（嵌入在 cli 中）捆绑并链接到索引。 html.

将其添加到 angular.json 中的样式数组中：

"styles": [
  "styles.css",
  "../styles/boostrap.min.css"
],

查看有关 angular cli 工作区配置的文档 https://angular.io/cli#workspace-and-project-configuration