Question

在我的styles.scss中，我正在导入引导程序变量，并对其进行了测试。

@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中的工作方式，如果您想在具有外部@mixins或样式的scss中使用SASS函数（例如@ include，@ extend），则每次都需要导入这些外部文件。

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

在您的示例中，我不明白为什么您需要在app.component.scss中执行相同的操作？只是为了测试吗？您不需要-将常见的样式（如您的样式）放在styles.scss中就足够了，它们应该应用于整个应用程序。只要确保将style.scss添加到样式部分下的angular.json文件中即可。像这样：

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

希望有帮助。

Boostrap-angular7的响应式方法要求清晰

1 个答案: