Bootstrap - Angular 7 的响应式方法需要清晰

Question

在我的 styles.scss 中，我正在导入 bootstrap 变量，并进行了测试。

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';

$grid-breakpoints: (
    sm: 768px,
    md: 768px,
    lg: 1024px
);

$container-min-widths: (
  sm: 768px,
  md: 768px,
  lg: 1024px
);

@import "~bootstrap/scss/bootstrap";

@include  media-breakpoint-down (sm) {
    body{
        background: green;
    }
}


@include  media-breakpoint-between (md, lg) {
    body{
        background: blue;
    }
}

@include  media-breakpoint-up (lg) {
    body{
        background: gray;
    }
}

但我的问题是，如果我使用 app.component.scss - 仍然需要再次导入所有变量吗？没有导入我试过了，比如：

@import '../../styles.scss'

@include  media-breakpoint-down (sm) {
    body{
        background: green;
    }
}


@include  media-breakpoint-between (md, lg) {
    body{
        background: blue;
    }
}

@include  media-breakpoint-up (lg) {
    body{
        background: gray;
    }
}

但出现如下错误：

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@include  media-breakpoint-down (sm) {
^
      Media query expression must begin with '('
      in D:\IBO\POC\ibo\src\app\app.component.scss (line 3, column 1)
i ｢wdm｣: Failed to compile.

我们不能一次下载所有应用特定要求吗？或者什么是正确的方法？

Answer 1

这就是 css 封装在 Angular 中的工作方式，如果你想在你的 scss 中使用 SASS 函数（如 @include、@extend） external @mixins 或 styles，每次都需要导入这些外部文件。

这不是一个很好的做法，因为它会在最终 html 页面中冒泡生成 css 的数量（每次您 @import 一个文件时，它的全部内容都会被复制）。因此，更好的方法是在您的 styles.scss 中放置一些常用样式，并在整个应用程序中使用它们。

在你的例子中我不明白为什么你需要在 app.component.scss 中做同样的事情？它只是为了测试吗？您不需要 - 将通用样式（如您的）放入 styles.scss 中就足够了，它们应该应用于整个应用程序。只需确保您的 style.scss 已添加到样式部分下的 angular.json 文件中。类似于：

"styles": [
   "src/styles.scss"
]

希望对您有所帮助。

Bootstrap - Angular 7 的响应式方法需要清晰

Boostrap - responsive approch with angular7 requires clarity

angular-bootstrap

angular7