Question

我无法理解如何在Angular组件中使用某些Bootstrap SCSS函数，例如theme-color或color。

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

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

但是这不起作用，我可以无误地添加。如果我在文件前添加@import '~node_modules/bootstrap/scss/bootstrap';，但是它没有考虑我的全局样式，而是使用默认颜色。

如果仅导入函数SCSS，则它不理解其他导入，例如包含var的导入，例如$color。

在我的全局styles.scss样式表中进行编辑时，一切正常。

似乎关于视图封装的某些事情正在阻止全局SCSS函数从Bootstrap过滤到我的组件SCSS，但我无法完全弄清它是什么。

那么，如何将全局Bootstrap之类的SCSS函数放入我的各个组件SCSS文件中？

Answer 1

这就是我的方法。

在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

common.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

如何在Angular组件中使用Bootstrap SCSS函数？

1 个答案: