在angular 2组件中访问引导scss变量

我正在开发一个使用Angular CLI构建的新Angular2项目，并已将该项目配置为使用SCSS。我已将Bootstrap 4成功加载到我的

styles.scss

文件中，但是如果我尝试从组件中访问任何Bootstrap（或我自己在

styles.scss

中定义的变量），我会得到

未定义变量

生成错误

组件的样式文件是否在

angular cli.json

的

styles

节点中的主条目之前编译？如何使在该全局级别定义的任何变量都可用于应用程序中的所有组件？谢谢

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
}

---

创建一个_colors.scss文件，复制其中的所有颜色变量，并将该文件导入component.scss文件。

仅仅因为您要将引导4导入

样式。scss

并不意味着组件上的

.scss

文件可以访问该文件

在

组件.scss

上，必须导入引导变量：

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

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

解释 很多人似乎对此感到困惑，你不应该将

bootstrap.scss

导入你的组件，你应该只导入你需要的东西

如果仔细查看，它们将所有内容都分隔在不同的文件中。您有

mixins

文件夹和

\u variables.scss

文件。这些应该是您在组件上导入的唯一内容，以避免CSS重复

这会增加我的包大小，在每个组件上导入这些东西吗

不，不会。为什么？

mixins

和

variables

是特定于sass的（至少目前是这样），所以当您将所有变量导入组件时，如下所示：

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

.navbar {
  background: $brand-primary;
}

其输出CSS将为：

.navbar {
  background: #007bff;
}

---

其他变量在编译成CSS后将被丢弃。

一些人建议导入

变量。scss

在每个组件中

。scss

但我发现这有点混乱。这样做与我们公司CSS的架构方式不太一致。我最终朝着这个方向去了使我能够使用变量、混合和扩展样式。这也允许我在一个位置管理所有CSS

我目前正在处理一个由Angular2 CLI生成的项目

---

我能够实现这一目标的另一种方法是通过执行以下操作：

从

app.component.ts

文件中删除

styleUrls

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
    // styleUrls: ['./app.component.scss']
});

我管理主

styles.scss

中所有较少的文件。因此，我当前的设置如下所示：

// Bootstrap
@import "../node_modules/bootstrap-less/bootstrap/index";

// Company Branding
@import "theme/index";

// Components
@import "app/app.component.scss";
@import "app/search/search.component.scss";

---

---

希望此替代解决方案能对某些人有所帮助。

这应该会起作用，但这样您可能无法利用视图封装。我想您必须将组件更改为

封装：视图封装。无

。我错了吗？@hgoebl是的，这不会起作用。我使用不同的封装。在我们的编码中样式我们总是有一个选择器来区分页面。我们没有使用

封装

，而是对该页面使用特定的选择器。快速测试显示：重复导入显然不会影响文件大小。只需使用几个组件对此进行检查，有效文件大小保持不变，无论是否包含_variable.scss是否存在于每个组件中（我没有检查文档，甚至没有检查实现）。因此@fabio antunes的答案可能更好，因为它不会破坏封装。但是，如果您将整个bootstrap.scss导入每个组件scss文件中，那么main.bundle.js会按比例为每个组件创建一组与组件相关的定义。@IgorBabic当您你只需要变量或混合？你应该只导入你需要的。如果我有十几个组件，那么

\u variables.scss

文件不是要读十几次吗？是的，它会被读取，但不包括在代码中，记住css没有变量与

~

平铺字符一起的变量吗？这就是你引用

[/*/**]/SCSS中的node_modules/{{packageName}

类似于TS中的

@angular/core/..

？是的，确切地说，除了TS部分之外，您不需要@来引用来自节点模块的包。在TS和节点中，任何绝对导入都将解析为node_modules@FabioAntunescss有变量：）