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中，因为它是应用程序的全局样式。也许要改进，您可以使用第三方lib来丑化您的CSS代码，也可以提高性能

欢呼

Answer 2

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

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

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

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

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

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

有关角度cli的信息，请参见有关工作区配置的文档 https://angular.io/cli#workspace-and-project-configuration

如何在非气候项目中使用全局CSS？

2 个答案: