如何导入一次 bootstrap-sass 并在多个文件中使用它？答案

【问题标题】：How do I import bootstrap-sass once and use it in several files?如何导入一次 bootstrap-sass 并在多个文件中使用它？
【发布时间】：2015-01-10 15:43:58
【问题描述】：

在文档中您可以阅读以下内容：

将 Bootstrap 导入一个 Sass 文件（例如 application.css.scss），以获取 Bootstrap 的所有样式、mixin 和变量！

@import "bootstrap";

https://github.com/twbs/bootstrap-sass

我有几个 scss 文件。我的应用程序的每个主要部分（user-page.scss、admin.scss 等）都有一个。

我尝试制作一个 application.scss 并导入文档中的引导程序。我在 bootstrap.scss 之后和所有其他 scss 文件之前添加了 index.html 中的文件。

<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">

我收到以下错误：

/usr/bin/scss --no-cache --update intro.scss:intro.css
      error intro.scss (Line 22: Undefined mixin 'make-row'.)

所以它似乎没有找到引导程序。如果我在每个文件中导入引导程序，它就可以工作。这是正确的方法吗？我想不是。当我尝试手动覆盖引导变量时遇到问题。

我怎样才能拥有多个 scss 文件并且只导入一次引导程序？

【问题讨论】：

标签： css twitter-bootstrap sass

【解决方案1】：

认为您将 SCSS 导入与 HTML CSS 链接混合在一起。所以这里的这一点是错误的：

<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">

我假设这是来自您构建的 HTML 文件。您的 HTML 不知道 SCSS 文件是什么。您的 SCSS 必须先被处理成 CSS 文件，然后才能在最终的 HTML 文件中使用。

导入 SCSS 文件的方法是在顶部的父 SCSS 文件中使用该导入命令。因此，如果您的主 SCSS 文件是 application.scss，那么在此顶部，您导入其他 SCSS 文件：

@import "bootstrap";

但您需要确保 _bootstrap.scss 文件与您的 application.scss 文件位于同一目录中，才能进行此导入。

【讨论】：

呸，这当然是应该的。效果很好。谢谢。