@extend 和 @import 不适用于 bootstrap.css 文件答案

【问题标题】：@extend and @import not working with bootstrap.css file@extend 和 @import 不适用于 bootstrap.css 文件
【发布时间】：2014-07-12 20:38:50
【问题描述】：

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

我有以下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 */

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

【问题讨论】：

Can I import an externally hosted file with sass?的可能重复
我不认为这是重复的。你链接的问题说我可以这样做吗？答案是肯定的（有两个答案），我的问题是，我正在导入和扩展一个类，但它不起作用。也许我遗漏了一些东西，也许你可以更明确地提出为什么这不起作用？谢谢
Sass 只能扩展在 Sass 文件中找到的选择器。它不能在 CSS 文件中扩展选择器，因为它们没有被编译，它们只是简单地链接到就像你使用 vanilla CSS 时一样。
如果我将 bootstrap.css 重命名为 bootstrap.scss 这应该可行吗？
（顺便说一句，我试过这个，但没有用）。实现这种将多个类合二为一的效果的最佳方法是什么？

标签： css twitter-bootstrap sass

【解决方案1】：

这是我做错了

不是这个

@import url('bootstrap.css');

但是这个

@import 'bootstrap.css';

【讨论】：

如何调试这个？因为没有错误，也没有工作。