代码之家 › 专栏 › 技术社区 › user2024080

有棱角的Boostrap-responsiveapproach需要清晰

angular-bootstrap angular7

0

user2024080 · 技术社区 · 7 年前

在我的 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.

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

0 回复 | 直到 7 年前

1

Albena Kertova 7 年前

这就是css封装在Angular中的工作方式,如果您想在scs中使用SASS函数(比如@include,@extend)和外部@mixin或style,那么每次都需要导入这些外部文件。

在您的示例中,我不明白为什么您需要在app.component.scss中执行相同的操作?只是为了测试?您不需要这样做-在styles.scs中放置常见样式(如您的样式)就足够了,它们应该应用于整个应用程序。只需确保style.scss已添加到style部分下的angular.json文件中。比如:

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

希望有帮助。