Angular + Bootstrap 风格主题答案

【问题标题】：Angular + Bootstrap style themeAngular + Bootstrap 风格主题
【发布时间】：2018-09-18 15:45:36
【问题描述】：

我正在使用 Angular 5 + Bootstrap 4，并且正在尝试制作风格主题。我做了一些非常简单的事情，但它仍然不起作用（无法编译）。

src/style.scss：

@function theme($key: "primary") {
  @return map-get($theme-colors, $key);
}

$theme-colors: (
  "bg": #888,
  "bg-title": #555,
  "danger": #ff4136
);

* {
  background: theme("bg");
}

src/app/header/header.component.scss：

* {
  background: $theme("bg-title");
}

错误：

ERROR in ./src/app/header/header.component.scss
Module build failed:
  background: $theme("bg-title");
             ^
      Undefined variable: "$theme".
      in C:\Users\crelierj\projects\ba\bootang\src\app\header\header.component.scss (line 2, column 15)

webpack: Failed to compile.

我了解问题所在，我在 style.scss 中定义的内容在 header.component.scss 中无法识别。但我不知道我该怎么做？我想定义一些可以在任何组件中使用的全局函数和主题，我认为 style.scss 就是这样做的方法。

有人可以告诉我如何正确地做到这一点吗？谢谢。

【问题讨论】：

标签： angular sass bootstrap-4

【解决方案1】：

您需要先在header.component.scss 中引用style.scss：

  @import './src/style.scss';
  ...

【讨论】：

它工作得很好，谢谢，我必须在我的 scss 中删除 $ 并且它是 styles.scss 但否则它就是我需要的。有没有办法在任何地方自动包含它？否则我每次都必须导入。
Yeah, I guess，不过我还没试过。