bootstrap.scss 컴파일 중 오류 - _root.scss와 관련된 문제

Question

부트 스트랩 sass 파일을 컴파일 할 때 오류가 발생합니다. 오류는 다음과 같습니다. _root.scss의 4 행과 8 행을 주석 처리하면 작동하지만 이상적인 해결책은 아닙니다. 무슨 일이야? - 난 당신이 CSS 변수의 일부를 손실에 대해 걱정하지 않은 경우

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";" 
     on line 4 of /Users/.../bootstrap-4.0.0/scss/_root.scss 
    ... 

1: :root { 
2: // Custom variable values only support SassScript inside `#{}`. 
3: @each $color, $value in $colors { 
4:  --#{$color}: #{$value}; 
5: } 
6: 
7: @each $color, $value in $theme-colors { 
8:  --#{$color}: #{$value}; 
9: } 

Answer 1

제공하는이 라인의 시작 부분에 색상 - 추가 할 수 있습니다.

• https://github.com/twbs/bootstrap/issues/24549

• https://github.com/sass/sass/issues/2383

이 시도 :

1: :root { 
2: // Custom variable values only support SassScript inside `#{}`. 
3: @each $color, $value in $colors { 
4:  --color-#{$color}: #{$value}; 
5: } 
6: 
7: @each $color, $value in $theme-colors { 
8:  --color-#{$color}: #{$value}; 
9: } 

Answer 2

말대꾸 3.5.3의 최신 버전을 실행하고, 라인 4 _root.scss의 8 다음 다시 컴파일을 주석 처리합니다. 그렇지 않으면, 그것은 SASS 컴파일러 자체의 버그처럼 보이는 --color-#{$color}: #{$value};

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

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

    @each $bp, $value in $grid-breakpoints { 

Check the solution

Update Color in _root.scss

Can't compile the SCSS