javascript - 在 Angular 的多个应用程序中，将影响多个组件的 scs 放在哪里？

Question

我正在重构一些 Angular (7) 组件，我不知道是否有一些最佳位置可以放置常见的 scss 样式以在许多组件的 styleUrls 中引用它。

在重构之前，scss 是全局的，必须构建才能在不同的应用程序之间使用。现在，大部分的scss都被封装了，需要的全局样式越少越好。 但是，我仍然可以在构建中使用一些全局 scss，因为它们会影响已知数量的组件。为了做到这一点，我在所有这些组件的根目录中提取了 scss，并在 styleUrls 中的每个单独组件 scss 之前引用它。 (使用来自 this article 的一些结构提示)

这是每个需要 controls.component.scss

的组件的导入方式

styleUrls: ['../controls.component.scss', './autocomplete.component.scss']

结构看起来有点像这样:

LibName1
  src
  assets_source
    global_styles
      _global-files.scss
    main.scss
  lib
    controls
      control1
      control2
        control2.component.html
        control2.component.scss
        control2.component.ts   --> here is the styleUrls
      ...
      controls.component.scss   --> the file I'm using to store cross-components style, importing in styleUrls.

到目前为止，一切正常。当我想在此应用程序之外使用相同的 scss 文件 (controls.component.scss) 时，问题就出现了。我们项目和库的更高级结构如下所示:

ProjectName
  src
    app
      components
        component1
          component1.html
          component1.scss
          component1.ts    --> Where I want to refer to the controls.component.scss in the styleUrls
        component2
        ...
libs
  LibName1 --> The LibName1 from the previous structure example

我希望能够在不同组件中使用文件 controls.component.scss 中的样式，而无需构建库并在主项目中引用其 css。我愿意将此文件移到其他地方，而我想要的是不必管理 super longue 相对路径。 我想知道这种情况下的最佳做法是什么。

Answer 1

要为您的应用程序使用全局，只需将所有内容放入您的 style.scss 中，它将影响整个应用程序样式

如果你想从库中导入 scss 文件，只需这样做

@import "~bootstrap/scss/bootstrap";
@import "~toastr/toastr";
@import "~font-awesome/scss/font-awesome";

只需使用 ~ 从 node_modules 文件夹导入 scss 文件