Question

我刚下载了boostrap 4 beta 2版本，但是当我尝试使用我的Koala编译器编译（原始）boostrap.scss文件时，我收到此错误

错误：＆＃34; ... lor}之后的CSS无效：＃{$ value}＆＃34;：预期＆＃34; {＆＃34;，是＆＃34 ;;＆＃34; 在scss / _root.scss的第4行上来自scss \ bootstrap.scss的第11行使用--trace进行回溯。

这是_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中Boostrap 4 beta2 SASS编译错误

2 个答案: