Question

我正在使用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是这样做的。

有人能告诉我怎么做得好吗？感谢。

Answer 1

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

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

Angular + Bootstrap风格主题

1 个答案: