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

萨马耶

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

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

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

但这是行不通的，我可能会添加错误。如果我@import '~node_modules/bootstrap/scss/bootstrap';在文件前添加：：但是，它没有考虑我的全局样式，而是使用默认颜色。

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

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

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

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

JB Nizet

这是我的方法。

在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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。