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

Question

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

将 Bootstrap 导入 Sass 文件(例如 application.css.scss)以获取 Bootstrap 的所有样式、mixin 和变量!

@import "bootstrap";

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

我有几个 scss 文件。一个用于我应用程序的每个主要部分(user-page.scss、admin.scsss 等)。

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

<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'.)

所以它似乎没有找到 Bootstrap 。如果我在每个文件中导入 Bootstrap ，它就会工作。这是正确的方法吗？我觉得不是。当我尝试手动覆盖 Bootstrap 变量时出现问题。

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

Answer 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 文件位于同一目录中，以便此导入工作。