How does one @import bootstrap.css and @extend bootstrap class selectors? [duplicate]

Question

a backend programmer here. Just looking at using scss for it's obvious benefit on the front end.

This is what I thought would let me @import bootstrap.css and @extend bootstrap class selectors. bootstrap.css, and this scss is in same directory as this .scss file

// styles.scss
@import "bootstrap.css";
#menu-top {
  @extend .navbar-fixed-top;
}

But, I get this

// generated styles.css
Error: "\#menu-top" failed to @extend ".navbar-fixed-top".
     The selector ".navbar-fixed-top" was not found.
     Use "@extend .navbar-fixed-top !optional" if the extend should be     
able to fail.
      on line 19 of links_style.scss
Use --trace for backtrace.

evanzto · Accepted Answer · 2015-10-11 09:31:44Z

1

As I can see you're importing the css bootstrap version. You must import the scss version to export any styles from this.

answered Oct 11, 2015 at 9:31

evanzto

9,3813 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

campbell Over a year ago

Thanks, I went back to Bootstrap, and I'm reading more about scss and Bootstrap, based on your lead here. Thanks.

Collectives™ on Stack Overflow

How does one @import bootstrap.css and @extend bootstrap class selectors? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related