从外部访问角度组件中的 CSS答案

【问题标题】：Accessing CSS in angular component from outside从外部访问角度组件中的 CSS
【发布时间】：2020-12-08 19:30:19
【问题描述】：

我正在开发一个角度应用程序基本上它是一个角度电子应用程序。我的应用程序中有组件，我可以在其中访问我的 css 文件，如下所示。

@Component({
  selector: 'my-app',
  templateUrl: './my-app.html',
  styleUrls: ['./../../../styles/app.css'],
  encapsulation: ViewEncapsulation.None
})

我正在尝试将 css 文件与我的 angular 项目分开，并希望从 outisde 位置访问这些 css 文件。我在 ngOninit() 中的 programData 下获得一个位置，然后附加 /resources/assets/cssFiles/app.css。如何在组件中使用此变量在组件中动态应用样式？

【问题讨论】：

标签： angular angular8 angular9

【解决方案1】：

在 angular.json 中，将该位置放入您的资产数组中。

【讨论】：

我不想给出硬编码的路径。我将从设置文件中获取 css 文件的路径，我需要使用该位置。这可能每次都不同
看看这篇文章，好像你在问vjtechworld.com/2019/09/…

【解决方案2】：

您可以通过将外部资产、css、javascript 等添加到您的项目angular.json 来引用它。找到合适的数组并在那里添加文件路径——在这种情况下，我建议添加到“样式”数组中。

当您 ng serve 或 build 时，样式将内置到您的应用中。

"architect": {
  "build": {
    "options": {
      ... bunch of stuff ...
      "styles": [
        "../path/to/css/file.css
      ]
    }
  }
}

【讨论】：

每个组件都有不同的文件。我的组件如何知道我必须将此 css 文件用于此特定组件
如果您希望样式只能在组件范围内访问，我建议您将样式复制到组件 css 文件中——这将使部署变得更加容易。如果你真的需要从项目的“外部”引用这个 css，你需要使用 angular.json 方法或者在构建之前运行一个脚本来动态加载 css。这里真正的问题是，如果组件开始从根项目外部引用 css，则在构建生产环境时需要考虑这一点。