Angular, Bootstrap 4, angular-cli - 在哪里放置依赖的scss并导入它？

Question

请参阅 this question，如果您的 scss 不依赖于 bootstrap 的变量，它就可以工作。

在我的 index.html:

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css"

如果我然后将 styles.scss 放入 /assets 文件夹，其内容如下：

@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}

项目构建失败：

Module build failed: 
@include media-breakpoint-up(sm) {
        ^
      No mixin named media-breakpoint-up

所以我的问题是我在哪里加载自己的 css 取决于 bootstraps 变量和混合？

Answer 1

您可以在angular-cli.json中设置styles.scss文件：

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

这会自动将其注入输出标记的头部。

要使用 Bootstrap 4 mixin，您应该添加 Bootstrap 作为项目依赖项：

npm install --save bootstrap@4.0.0-alpha.5

然后您可以直接在您的 SCSS 文件中导入 mixin（使用“~”表示 node_modules root）。

所以在你的 SCSS 中你引用 bootstrap 比如：

@import '~bootstrap/scss/mixins';

Angular, Bootstrap 4, angular-cli - where to place dependent scss and import it?