Angular 如何在角组件中使用引导SCSS函数？

我很难理解如何在角度组件中使用某些引导SCSS函数，例如主题颜色或颜色

我有一个component.scss，看起来像：

.card {
  cursor: pointer;
  &:hover {
    background-color: theme-color("primary");
  }
}

但这不起作用，我可以补充一点，没有错误。如果我在前面加上：@import'~node_modules/bootstrap/scss/bootstrap'；但是，对于文件，它不考虑我的全局样式，它使用默认颜色

如果我只导入函数scs，那么它不理解其他导入，比如包含变量的导入，比如$color

在my global styles.scss样式表中编辑时，一切正常

看起来好像视图封装阻止了全局SCSS函数从引导过滤到我的组件SCSS，但我不能完全了解它是什么

那么，如何将全局SCSS函数（如引导）放入我的单个组件SCSS文件中？

以下是我的方法

在styles.scss中：

@import 'custom-bootstrap';
// + custome global scss rules

在custom-bootstrap.scss中

@import './common';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
// + other imports copied from the standard bootstrap.scss file
// some of them being commented out because I don't need them

共同点.scss

// potential bootstrap variable overrides here
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

在任何组件scss文件中：

@import '../../common'; // the path may of course vary depending on the depth
// and here I can use any bootstrap (or custom) variable, mixin or function

---

不要导入整个引导，只导入您需要的：函数、变量和混合。@jbnize似乎如果我只导入函数，它就不会识别colors变量，而且我忘了提到，如果我导入，它不使用我在全局样式表中应用的颜色，它只使用默认颜色，似乎我需要重新导入所有样式。css@JBNizet尽管刚刚尝试过，它似乎改变了导入路径，使我的样式全局表中的嵌套导入不再解析Sweet，是的，这似乎有效，谢谢，甚至加入了我自己的引导变量，这样我现在就可以得到我的完整主题着色了，这与视图封装有关吗？是否将组件样式从全局符号表中分离出来，就像我查找主题颜色时从不同的符号表中分离出来一样？是，否。组件scss文件不只是附加在一起，然后一次性编译。好吧，它们是单独编译的，每个组件都有自己的、单独的CSS文件。然后，在运行时，视图封装本身用于避免应用标准级联规则。