Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
koki-miyazaki opened this issue Jun 3, 2020 · 4 comments

Comments

@koki-miyazaki
Copy link

koki-miyazaki commented Jun 3, 2020

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
Copy link

i8ramin commented Jun 30, 2020

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
Copy link

@koki-miyazaki have you found any solution?

@koki-miyazaki
Copy link
Author

koki-miyazaki commented Mar 26, 2021

@vishal-bacancy
no, this works, but not clear way (just stopped using placeholder)
master...koki-miyazaki:fix-sassc-syntaxerror

there is a discussion about the @extend ing inside media query
sass/sass#1050

so maybe need to wait for the update?

@pmcgoverncw
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants