angular - 访问 angular 2 组件中的 bootstrap scss 变量

Question

我正在开发一个使用 Angular CLI 构建的新 Angular2 项目，并将该项目配置为使用 SCSS。我已将 Bootstrap 4 成功加载到我的 styles.scss 文件中，但是如果我尝试从组件中访问任何 Bootstrap 的(或我自己在 styles.scss 中定义的变量，我得到 Undefined Variable 构建错误。

在angular-cli.json的styles节点中，组件的样式文件是否在main入口之前编译？我怎样才能使在该全局级别定义的任何变量都可用于应用程序中的所有组件？谢谢!

angular-cli.json

"apps": [
  {
    ...
    "styles": [
      "styles/styles.scss"
    ],
    ...
  }
]

样式.scss

// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";

组件

.navbar {
  background: $brand-primary; // Undefined variable here
}

Answer 1

仅仅因为您将 bootstrap 4 导入到您的 styles.scss 并不意味着您的组件上的 .scss 文件可以访问它。

在您的 component.scss 上，您必须导入 Bootstrap 变量:

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary; // No more Undefined variable here
}

解释

在我看来，很多人对此感到困惑，你不应该将 bootstrap.scss 导入你的组件，你应该只导入你需要的东西。

如果您仔细查看 the source code of bootstrap.scss他们将所有内容分开放在不同的文件中。您有 mixins 文件夹和 _variables.scss 文件。这些应该是您在组件上导入的唯一内容，以避免 CSS 重复。

Would this increase my bundle size, importing these things on every component?

不，不会。为什么？ mixins 和 variables 是特定于 sass 的(至少现在是这样)，所以当您将所有变量导入组件时，如下所示:

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary;
}

输出的 CSS 将是:

.navbar {
  background: #007bff;
}

其余变量在编译为 CSS 后将被丢弃。