css - 如何在非 cli Angular 元素中使用全局 css？

Question

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

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

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

我是否必须在 app.component 文件中手动导入“全局样式文件”？我是否对像 Bootstrap 这样的 vendor 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 代码也可以提高性能

干杯