Question

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

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

@import "bootstrap";

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

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

我尝试在docs中创建一个application.scss和导入的bootstrap。我在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'.)

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

我如何拥有多个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文件位于同一目录中，以使此导入生效。

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

1 个答案: