_root.scss 中的 Bootstrap 4 beta 2 SASS 编译错误

Question

我刚刚下载了 boostrap 4 beta 2 版本，但是当我尝试使用我的 Koala 编译器编译 (original) boostrap.scss 文件时，出现此错误

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";" on line 4 of scss/_root.scss
from line 11 of scss\bootstrap.scss
Use --trace for backtrace.

这是_root.scss

:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
 --#{$color}: #{$value};
}

我尝试使用

--`#{$color}`: `#{$value}`;

但没有成功

如何解决这个问题？
谢谢

Answer 1

更新您的 sass 版本以解决问题

gem update sass

或

sudo gem update sass

参考：https://github.com/twbs/bootstrap/issues/24549

Answer 2

如果你确实需要使用3.5.2以下的Sass版本（无论出于何种原因），你可以通过修改_root.scss部分来解决这个问题，如下所示：

Sass 输入（_root.scss）：

@function literal($output) {
  @return unquote($output);
}
$tmpliteral: literal('--');
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    #{$tmpliteral}#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    #{$tmpliteral}#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    #{$tmpliteral}breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  #{$tmpliteral}font-family-sans-serif: #{inspect($font-family-sans-serif)};
  #{$tmpliteral}font-family-monospace: #{inspect($font-family-monospace)};
}

CSS 输出：

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: white;
  --gray: #868e96;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

我知道它不是很优雅，但解决了旧 Sass 编译器的问题并生成了所需的 CSS。我已经用 Sass 3.3.8.

测试了这个

_root.scss 中的 Bootstrap 4 beta 2 SASS 编译错误

Boostrap 4 beta2 SASS compiling error in _root.scss

bootstrap-4

compass-sass