html - 如何在 .scss 文件中包含外部 CSS 文件作为类的规则？

Question

我只想对页面的特定部分使用 bootstrap-3.3.7.min.css 规则。所以，我下载了它，创建了一个名为 bootstrap.scss 的新文件，并尝试向其中添加这条规则。我在我的网站上使用 django，所以我安装了 sass 并在我的设置中添加了预编译器规则。

在我的 bootstrap.scss 文件中，我添加了这条规则来影响所有 bs3 类:

.bs3 {
  @include bootstrap-3.3.7.min.css;
}

bootstrap-3.3.7.min.css和bootstrap.scss在同一个目录，所以我不确定是否还需要指定完整路径.

在我的模板中:

<link href="{% static "css/bootstrap.scss" %}" rel="stylesheet" type="text/css" />

<input id="example" type="submit" class="bs3 delBtn" value=" " rel='popover' data-placement='right' data-content='Some message'/>

想法是让 .scss 文件规则仅适用于类为 bs3 的元素。如您所料，这是行不通的。我看不到该类(class)有任何变化。但是如果我将 body{background-color: red;} 添加到 bootstrap.scss，我可以看到那个变化，所以我知道正在加载 scss 文件。

我尝试了一些来自其他 stackoverflow 问题的修复，例如:

1. 使用 import 而不是 include - @import "full/path/to/file.css"
2. 使用import，文件末尾没有.css

这些都不起作用。我是 SASS 世界的新手，我可能在这里犯了一些愚蠢的错误。如果你能指出它们，那将非常有帮助。谢谢!

Answer 1

如果您导入所有 sass 部分并将它们包装在某种类型的命名空间类中，它应该可以工作:

.b3 {
    @import "/bootstrap-3.3.7-folder/_buttons.scss";
    @import "/bootstrap-3.3.7-folder/_grid.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_etc.scss";
}

这将输出包装在 .bs3 {} 中的所有 bs-3.3.7 样式

.bs3 .btn {}
.bs3 .row {}
/* etc */

然后把那些元素包裹起来

<div class="b3">
    <!-- all your 3.3.7 specific styles here -->
    <button class="btn">Click Me</button>
</div>