时间戳

首页 > 解决方案 > 如何在 Angular 组件中使用 Bootstrap SCSS 函数？

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

问题描述

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

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

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

但这不起作用，我可以添加没有错误。但是，如果我将：@import '~node_modules/bootstrap/scss/bootstrap';添加到文件中，它不会考虑我的全局样式，它会使用默认颜色。

如果我只导入函数 SCSS 则它不理解其他导入，例如包含变量的导入，例如$color.

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

似乎关于视图封装的某些东西正在阻止全局 SCSS 函数从 Bootstrap 过滤到我的组件 SCSS，但我不太清楚它是什么。

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

标签： angularangular8

解决方案

这是我的做法。

  1. 在styles.scss 中：

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

  2. 在 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

  3. 共同点.scss

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

  4. 在任何组件 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

推荐阅读