media-breakpoint-up
在向 $grid-breakpoints 添加新断点后,我在使用 Bootstrap 的mixin声明 scss 样式时遇到问题。
虽然这些d-{infix}-{display}
类出现正确并且带有它们的部分工作正常,但组件级 scss 样式没有看到新的断点,尽管导入。
我的问题是 - 我在这里做错了吗?比如进口顺序?
具有这两个依赖项的 Angular CLI 应用程序:
"bootstrap": "^4.1.3",
"ngx-bootstrap": "^3.0.1",
样式.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);
我的主题.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>
应用程序组件.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。
我创建了一个自定义包装器 mixin,它确认未找到断点。
@mixin respond-above($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@include media-breakpoint-up($breakpoint){
@content;
}
} @else {
@warn 'Missing breakpoint: #{$breakpoint}.';
}
}
我可以想到两件潜在的事情。
1)您包含bootstrap.partials';
在全局styles.scss中,但是如果在那里定义了任何变量或mixin,它们将从最终的全局css中“编译出来”,并且在组件部分中不可用。因此,您可能必须将其包含在您的app.component.scss
2)你angular.json
在根目录下是什么样子的?尝试将node_modules
引导程序目录的路径添加到stylePreprocessorOptions.includePaths[]
in angular.json
。
{
"projects": {
"myProject": {
"architect": {
"build": {
"options": {
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap"
]
},
}
}
}
}
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句