首页 文章

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

提问于
浏览 次
7

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

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

@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？

css twitter-bootstrap sass

1 回答

  • 7

    认为您正在将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文件的方法是在顶部使用该导入命令 inside the parent SCSS file . 因此，如果您的主SCSS文件是 application.scss ，那么在其顶部，您将导入其他SCSS文件：

    @import "bootstrap";

    但您需要确保 _bootstrap.scss 文件与 application.scss 文件位于同一目录中，以使此导入生效 .

    回复于

相关问题