Пользовательская точка останова Bootstrap 4 не видна в стилях уровня компонентов в приложении Angular CLI - PullRequest
Новая
       43

Пользовательская точка останова Bootstrap 4 не видна в стилях уровня компонентов в приложении Angular CLI

0 голосов
/ 19 октября 2018

У меня проблемы с объявлением стилей scss с использованием media-breakpoint-up mixin Bootstrap после добавления новой точки останова к $ grid-breakpoints.

Хотя классы d-{infix}-{display} выходят правильно, а раздел с ними работает простохорошо, стили scss на уровне компонентов не видят новую точку останова, несмотря на импорт.

Мои вопросы: я что-то здесь не так делаю?например, порядок импорта?

Приложение углового интерфейса командной строки с этими двумя зависимостями: 

"bootstrap": "^4.1.3",
"ngx-bootstrap": "^3.0.1",

styles.scss 

@import 'scss/my.variables';
@import 'scss/my.theme';
@import 'scss/bootstrap.partials';

my.variables.scss (ничего важного) 

$brand-primary:#00a651
$fixed-header-min-height: 70px;    
$box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-hover: 0 4px 12px 0 rgba(0, 0, 0, 0.3);

my.theme.scss 

$font-family-sans-serif:  proxima-nova, Helvetica, Arial, sans-serif;
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base:        $font-family-sans-serif;
$font-weight-normal:      200;
$font-weight-base:        $font-weight-normal;
$body-bg:                 #fff;

bootstrap.partials.scss 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1540px
);

// Bootstrap partial imports to keep the bloat away
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';

app.components.html 

<h1>Custom breakpoint - xxl introduced (1600px)</h1>

<h2>media queries (media-breakpoint-up et al.)</h2>
<div class="main">
  <p>
    this text should be blue, but red above xxl
  </p>

  <small>
    This Text Should All Be Lowercase, but Uppercase above xxl
  </small>
</div>

<h2>d-* classes</h2>

<p class="d-block">Visible always</p>
<p class="d-none d-lg-block">Visible above lg</p>
<p class="d-none d-xxl-block">Visible above xxl</p>

app.component.scss 

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import '~bootstrap/scss/mixins/_breakpoints';

.main {
  color: blue;
  @debug $grid-breakpoints;

  @include media-breakpoint-up(xxl) {
    /* I have also tried without repeating the selector */
    .main {
      color: red;
    }
  }

  small {
    text-transform: uppercase;
    @include media-breakpoint-up(xxl) {
      small {
        text-transform: lowercase;
      }
    }
  }
}

Вывод 

DEBUG: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

Нет xxl.

Редактировать 1:

Я создал собственный миксин оболочки, который подтвердил, что точка останова не найдена. 

@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @include media-breakpoint-up($breakpoint){
      @content;
    }
  } @else {
    @warn 'Missing breakpoint: #{$breakpoint}.';
  }
}

1 Ответ

0 голосов
/ 19 октября 2018

Я могу подумать о двух потенциальных вещах, которые могут быть.

1) Вы включаете bootstrap.partials'; в глобальный styles.scss, но если там есть какие-либо переменные или миксины, они будут ""составлен" из окончательного глобального CSS и не будет доступен в компонентах компонента.Следовательно, вам, возможно, придется включить его в app.component.scss

2) Как выглядит angular.json в корневом каталоге?Попробуйте добавить путь к каталогу начальной загрузки node_modules в stylePreprocessorOptions.includePaths[] в angular.json. 

{
    "projects": {
        "myProject": {
            "architect": {
                "build": {
                    "options": {
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "node_modules/bootstrap"
                            ]
                        },
                    }
                }
            }
        }
    }
}
...