css - @extend和@import无法与bootstrap.css文件一起使用

编辑：我不认为这是重复的。您所链接的问题说我可以这样做吗？答案是肯定的（有两个答案），我的问题是，我正在导入和扩展一个类，但是它不起作用。

我有以下HTML页面

<!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>

和的scss文件

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

不幸的是，小面板类不能呈现为面板。但是，我分别指定每个类的div确实呈现为面板（小面板根本没有任何格式，如果我执行检查源代码，则小面板不存在）。

那么，如何获得我的scss文件来扩展引导类？我在这里做错什么了吗？我宁愿不使用bootstrap sass文件...我将来可能会这样做，但就目前而言，我想使事情保持简单而不改变太多。

如果我导航到localhost：44301 / content / site2.css我会得到

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

顺便说一句，我将Visual Studio 2013与MVC中的SassAndCoffee插件一起使用。

最佳答案

这就是我做错的

不是这个

@import url('bootstrap.css');

但是这个

@import 'bootstrap.css';

SS文件

css - @extend和@import无法与bootstrap.css文件一起使用