如何使用SASS和bootstrap将所有CSS合并到一个文件中

我对SASS和bootstrap比较陌生。我将引导与SASS结合使用，并对一个概念进行了一点挣扎

我总是这样使用CSS：一个带有基本布局的基本CSS文件（eq.base.CSS）。每个模板还包括一个不同的CSS文件（eq.sitemap.CSS、team.CSS、news.CSS）。此CSS文件仅包含相应模板的部分。因此，我可以覆盖以前文件中的定义

在SASS中，所有内容都在一个文件中编译。与bootstrap相结合，我实际上一直在为我至今使用的概念而挣扎

每次我想在现有定义中添加一个新的CSS文件时，我都会遇到一个错误，因为我必须重新包含完整的引导结构。但是如果我重新包含它，整个引导代码也会被写入其他文件（eq.sitemap.css、team.css、news.css）。如果在HTML树中同时包含这两个文件，则引导定义（如整个normalize块）会被定义两次或更多次

我有以下设置：

- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
  |-- base.css
  └-- team.css

在base.scss中，我包含了引导程序。我也需要team.scss中的引导功能，但不是所有的主要功能，比如规范化功能

我如何做到这一点？这是可能的，还是我必须通过向body标签（比如body.team）添加css类来切换css需求？但是我必须在一个文件中携带每个页面的所有CSS内容。这不是螃蟹吗

编辑将事情弄清楚一点： 这在base.scss中：

@import "settings/vars";
@import "vendors/bootstrap";
...
header {
    @extend .container;
    ...
    .contentbox {
        margin-top: $mainGap;
    }
    ...
}
...

这是在team.scss中：

header .contentbox {
    @extend .sr-only;
}

很明显，“@extend.sr only；”在team.scss中不起作用，因为没有引导。但是如果我把bootstrap和

@import "vendors/bootstrap";

在team.scss的第一行中，我会自动将所有标准的16kb引导内容添加到team.css中。但是，这些定义已经存在于base.css中。所以我会有一个可预防的开销

---

我想我知道没有办法说：“嘿，bootstrap。我已经把你包括在base.scss中了。所以你不必再把你自己的全部主要定义写进team.scss。但是我需要你，因为我喜欢你作为一个可用的框架。所以不管怎样，请给我函数和变量。”。但是也许？

在这种情况下，我要做的是使用引导编译

base.scss

，以及所有的基本代码和我定制的

\u变量.scss

。然后，如果我想添加

team.scss

，我只需导入mixin和我需要从引导中使用的自定义变量。听起来很棒

但是

由于

.sr only

和其他仅作为类而不是SASS mixin提供，因此您不能像使用

.transition

mixin那样

@包含它

因此，目前如果您正在使用SASS，您有两种选择：

使用要扩展/重用的类导入引导模块

//contain the .sr-only definition
@import "vendors/bootstrap/_scaffolding"; 
@import "vendors/bootstrap/_variables";

header .contentbox {
    @extend .sr-only;
}


从引导源复制/粘贴类，并对其进行扩展：

@import "vendors/bootstrap/_variables";

// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

header .contentbox {
  @extend .sr-only;
}


您正在搜索的内容在Sass中被命名为，我想：

如果您有一个要导入但不想编译为CSS文件的SCSS或Sass文件，可以在文件名的开头添加一个下划线。这将告诉Sass不要将其编译为普通CSS文件。然后可以导入这些文件而不使用下划线

例如，您可能有
\u colors.scss
。这样就不会创建
\u colors.css
文件，您可以这样做

@import "colors";

和
\u颜色。将导入SCS

仅供参考，如果sass将所有文件编译成一个文件，您只需将“引导”文件包含到
base.scss
中即可。然后，它将可用于您代码的所有其他部分。您得到的确切错误是什么？您确实希望多个CSS作为输出的@brewal saidDo是什么？从性能角度来看，1个CSS更好（仅向服务器发出1个请求，最近的浏览器仍有~4+个字体、图像、js等并行下载）。也有一些例外，比如我正在工作的网站下载了3x25kB的CSS，但是CSS非常庞大，而且可以下载的图像非常少download@FelipeAls是的，我想要很多输出文件。文件名只是为了说明问题。在项目的结构中，有一些真正复杂的子页面需要它们自己庞大的css部分。那么，如果其他用户真的不需要它，为什么还要下载呢？谢谢你的回答，汤姆。问题不在规范化。这只是为了说明问题。我在原帖的编辑中澄清了一些事情。哦，我明白了。因此，“理想的”引导应该将所有功能封装在一个mixin中，并且只有在包含类似“provideBootstrap.scss”的内容时，才应该编写所有CSS。但现在我学到了很多，因为我不知道只包含引导程序的一部分就行了。