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变量和mixins？

Answer 1

您可以在angular-cli.json：

中设置styles.scss文件

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

这将自动将其注入输出标记的head部分。

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

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

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

因此，在您的SCSS中，您可以参考类似的引导程序：

@import '~bootstrap/scss/mixins';