Question

修改：我不认为这是重复的。你联系的问题说我可以这样做吗？答案是肯定的（有两个答案），我的问题是，我导入和扩展了一个类，但它没有用。

我有以下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类呢？我在这里做错了吗？我宁愿不使用bootstrap sass文件......我可能会在将来这样做，但是现在我想保持简单，不要改变太多东西。

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

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

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

Answer 1

这就是我做错了

不是这个

@import url('bootstrap.css');

但是这个

@import 'bootstrap.css';

@extend和@import不使用bootstrap.css文件

1 个答案: