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

我有ASP.NETMVC作为服务器，Angular作为客户端应用程序

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

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

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

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

从'@angular/core'导入{Component}；
导入“../styles/myglobalStyles.css”
导入“../styles/boostrap.min.css”
导入“../styles/otherVendors.min.css”
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”
})
导出类AppComponent{}

另一个问题是在ANGULAR CLI设置中，要做的是在

ANGULAR CLI.json

文件中添加以下内容。它有什么作用？在构建过程中是否将styles.css文件添加到app.component.html？（你能指出任何来源/文件吗？）

---

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

---

Cheers

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

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

样式范围文档

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

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

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

请参阅有关angular cli的工作区配置的文档

---

您可以在

style.css

和

component.scss

中添加所有css，以调用

样式<代码>@import.../../../styles”HTML

中的类，你就没事了。请不要这样改变你的问题。这样做会使当前答案无效。如果你有一个新问题，-不要用新问题编辑现有问题。还有，花点时间读一读。@Zoe，好的。我的“新”问题的内容是什么？如果你指的是我回滚的修订版，那么就有了。如果单击“编辑的分钟前”文本，您将被重定向到。如果你点击“来源”查看任何版本，你都可以。明白了。谢谢你，伙计！你有没有关于你所说的网页包配置的例子？我这里有很多文件，例如，_button.scss文件，它们被@imported到main.scss文件中”，那么我如何确保只有转换后的“main.css”文件被附加到应用程序中，并且还有单独的vender.css（例如bootstrap.scss文件）？我看不到您提供的wepackconfig正在这样做。我在lib.scss中包含了所有内容，因此它将提取到css文件名lib.csw，我想要的是“非cli”解决方案。我没有angular.json文件。然后，您需要使用webpack或类似的构建系统来编译您的类型脚本、树抖动、捆绑和分块应用程序代码，用于开发和应用程序nd prod.要使用webpack，您需要将其添加到项目中并对其进行配置。创建CLI的全部原因是为了减少配置webpack所需的学习曲线。CLI嵌入了webpack。但这是可以做到的。这是一篇前景看好的文章

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