Bootstrap 5 beta SCSS 编译错误 Invalid CSS答案

【问题标题】：Bootstrap 5 beta SCSS compiling error Invalid CSSBootstrap 5 beta SCSS 编译错误 Invalid CSS
【发布时间】：2021-06-23 15:06:05
【问题描述】：

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

错误 scss/bootstrap-grid.scss（scss/mixins/_grid.scss 的第 6 行： "...r-x: #{$gutter}" 后的 CSS 无效：预期为 "{"，原为 ";")

我不知道出了什么问题。我所做的就是将 bootstrap main scss 导入我的自定义 scss。

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

谁能帮我解决它？

【问题讨论】：

标签： twitter-bootstrap sass

【解决方案1】：

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

bootstrap-grid.scss 的语法是

/*!
 * 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 包并尝试一下！

【讨论】：

【解决方案2】：

这可能与使用已弃用的 scss 编译器有关。使用Dart Sass，如official Bootstrap 5 documentation中所述：

萨斯

Bootstrap 使用 Dart Sass 将我们的 Sass 源文件编译成 CSS 文件（包含在我们的构建过程中），我们建议您执行如果您使用自己的资产管道编译 Sass，则相同。我们之前使用 Node Sass 进行 Bootstrap v4，但 LibSass 和包基于它构建的，包括 Node Sass，现在已被弃用。

官方文档声明使用Dart Sass。在查看此equally named package on NPM 时，它被标记为deprecated。实际上需要的是Sass NPM Package。

Angular V12 项目

请参考this blog post。

Angular CDK 和 Angular Material 在内部采用了 Sass 的新模块系统。如果您的应用程序使用 Angular CDK 或 Angular 材料，你需要确保你已经从 node-sass 切换到 sass npm 包。 node-sass…” — Mark Techson

【讨论】：