Boostrap - адаптивный подход с angular7 требует ясности - PullRequest
Новая
       14

Boostrap - адаптивный подход с angular7 требует ясности

0 голосов
/ 29 января 2019

В моем 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.

не можем ли мы загрузить все специфические требования приложения сразу?или каков правильный подход?

1 Ответ

0 голосов
/ 18 июня 2019

Так работает инкапсуляция css в Angular. Если вы хотите использовать функции SASS (например, @include, @extend) в scss с внешними @mixins или стилями, вам нужно будет каждый раз импортировать эти внешние файлы.

Это не очень хорошая практика, так как она выдувает количество созданного CSS на последней html-странице (каждый раз, когда вы @ импортируете файл, копируется весь его контент).Поэтому лучшим подходом было бы поместить некоторые общие стили в ваши styles.scss и использовать их во всем приложении.

В вашем примере я не понимаю, почему вы должны делать то же самое в app.component.СКС?Это только для тестирования?Вам не нужно это делать - достаточно поместить общие стили (например, ваши) в styles.scss, и они должны применяться ко всему приложению.Просто убедитесь, что ваш style.scss добавлен в ваш файл angular.json в разделе стилей.Что-то вроде: 

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

Надеюсь, это поможет.

...