SassC::SyntaxError: Error: You may not @extend selectors across media queries

[koki-miyazaki]

bootstrap-4.5.0 sassc-2.4.0 ruby-2.6.6 rails-5.2.4.3

SassC::SyntaxError: Error: You may not @extend selectors across media queries.
       Use "@extend %responsive-container-xl !optional" to avoid this error.
        on line 62:7 of vendor/bundle/ruby/2.6.0/gems/bootstrap-4.5.0/assets/stylesheets/bootstrap/mixins/_breakpoints.scss, in mixin `media-breakpoint-up`
        from line 23:14 of vendor/bundle/ruby/2.6.0/gems/bootstrap-4.5.0/assets/stylesheets/bootstrap/_grid.scss
        from line 16:9 of vendor/bundle/ruby/2.6.0/gems/bootstrap-4.5.0/assets/stylesheets/_bootstrap.scss

I think here https://github.com/twbs/bootstrap-rubygem/blob/v4.5.0/assets/stylesheets/bootstrap/_grid.scss#L34 we are using @extend, inside @media https://github.com/twbs/bootstrap-rubygem/blob/v4.5.0/assets/stylesheets/bootstrap/mixins/_breakpoints.scss#L61

[i8ramin]

Also getting similar error

bootstrap-4.5.0 sassc-2.4.0 ruby-2.5.1p57 rails-5.2.3

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %responsive-container-sm" on line 34 of /Users/ramin/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.5.0/assets/stylesheets/bootstrap/_grid.scss.

[vishal-bacancy]

@koki-miyazaki have you found any solution?

[koki-miyazaki]

@vishal-bacancy no, this works, but not clear way (just stopped using placeholder) https://github.com/twbs/bootstrap-rubygem/compare/master...koki-miyazaki:fix-sassc-syntaxerror

there is a discussion about the @extend ing inside media query https://github.com/sass/sass/issues/1050

so maybe need to wait for the update?

[pmcgoverncw]

@koki-miyazaki SASS Issue 1050 was created almost 10 years ago. Can't hold our breath on that one. As it stands now, I am searching for a workaround to allow Laravel / Sass / Bootstrap / Vite build to run without dying on this error.