时间戳

首页 > 解决方案 > Bootstrap 5 beta SCSS 编译错误 Invalid CSS

twitter-bootstrap - Bootstrap 5 beta SCSS 编译错误 Invalid CSS

问题描述

编译 Bootstrap 5 beta SCSS 时出现以下错误。

错误 scss/bootstrap-grid.scss（scss/mixins/_grid.scss 的第 6 行：“...rx: #{$gutter}”后的 CSS 无效：预期为“{”，为“;”）

我不知道出了什么问题。我所做的就是将 bootstrap mainscss导入到我的 customscss中。

bootstrap.scss即使在没有任何自定义样式表的情况下进行编译也会产生相同的错误。

谁能帮我解决它？

标签： twitter-bootstrapsass

解决方案

我可以看到并理解您尝试编译引导程序bootstrap-grid.scss

bootstrap-grid.scssis 的语法

/*!
 * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

$include-column-box-sizing: true !default;

@import "functions";
@import "variables";

@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";

@import "vendor/rfs";

@import "containers";
@import "grid";

@import "utilities";
// Only use the utilities we need
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-get-multiple(
  $utilities,
  (
    "display",
    "order",
    "flex",
    "flex-direction",
    "flex-grow",
    "flex-shrink",
    "flex-wrap",
    "justify-content",
    "align-items",
    "align-content",
    "align-self",
    "margin",
    "margin-x",
    "margin-y",
    "margin-top",
    "margin-end",
    "margin-bottom",
    "margin-start",
    "negative-margin",
    "negative-margin-x",
    "negative-margin-y",
    "negative-margin-top",
    "negative-margin-end",
    "negative-margin-bottom",
    "negative-margin-start",
    "padding",
    "padding-x",
    "padding-y",
    "padding-top",
    "padding-end",
    "padding-bottom",
    "padding-start",
  )
);

@import "utilities/api";

确保您具有与上述相同的模式。如果您再次遇到此问题，请再次下载 bootstrap v5.0 包并尝试一下！

推荐阅读