@extend and @import not working with bootstrap.css file

Question

Edit: I don't think this is a duplicate. The question you've linked says can I do this? The answer is yes (there are two answers), my question is, I'm importing and extending a class but it is not working.

I have the following html page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/Site2.css" rel="stylesheet" /></head>
<body>
    <div class="small-panel">My scss class panel</div>
    <div class="col-md-6 col-md-offset-3 panel panel-default">My classes panel</div>
</body>
</html>

and the scss file of

@import url('bootstrap.css');
.small-panel {
    @extend .col-md-6;
    @extend .col-md-offset-3;
    @extend .panel;
    @extend .panel-default;
}

Unfortunately the small-panel class does not render as a panel. However the div where I specify each class individually does render as a panel (the small-panel does not have any formatting at all and if I do an inspect source code small-panel is not there).

So, how do I get my scss file to extend the bootstrap classes? Am I doing something wrong here? I'd rather not use the bootstrap sass files...I might do this in the future but for now I want to keep things simple and not change things around too much.

If I navigate to localhost:44301/content/site2.css I get

@import url('bootstrap.css');
/*# sourceMappingURL=Site2.css.map */

btw, I'm using Visual Studio 2013 with the SassAndCoffee plugin in MVC.

possible duplicate of Can I import an externally hosted file with sass? — cimmanon
– cimmanon, Commented May 23, 2014 at 13:51
I don't think this is a duplicate. The question you've linked says can I do this? The answer is yes (there are two answers), my question is, I'm importing and extending a class but it is not working. Maybe I'm missing something, maybe you could be more explicit and suggest why this isn't working? Thank you — atreeon
– atreeon, Commented May 23, 2014 at 15:13
Sass can only extend selectors that are found within Sass files. It cannot extend selectors within CSS files because they are not compiled, they are simply linked to like they would be if you were using vanilla CSS. — cimmanon
– cimmanon, Commented May 23, 2014 at 15:50
If I rename bootstrap.css to bootstrap.scss should this work? — atreeon
– atreeon, Commented May 23, 2014 at 16:05
(by the way, I have tried this and it didn't work). What is the best way to achieve this effect of combining more than one class into one? — atreeon
– atreeon, Commented May 23, 2014 at 16:23

atreeon · Accepted Answer · 2014-05-23 20:54:40Z

2

This is what I was doing wrong

Not this

@import url('bootstrap.css');

but this

@import 'bootstrap.css';

answered May 23, 2014 at 20:54

atreeon

24.4k14 gold badges95 silver badges117 bronze badges

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

1 Comment

Vishal Kumar Sahu Over a year ago

How to debug this? As there is no error and not working either.

Collectives™ on Stack Overflow

@extend and @import not working with bootstrap.css file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related