twitter-bootstrap 如何导入 bootstrap-sass 一次并在多个文件中使用它?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26909849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I import bootstrap-sass once and use it in several files?
提问by Joe
In the docs you can read the following:
在文档中,您可以阅读以下内容:
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
将 Bootstrap 导入一个 Sass 文件(例如 application.css.scss)以获取 Bootstrap 的所有样式、mixin 和变量!
@import "bootstrap";
https://github.com/twbs/bootstrap-sass
https://github.com/twbs/bootstrap-sass
I have several scss files. One for every major section of my app (user-page.scss, admin.scsss etc).
我有几个 scss 文件。一个用于我的应用程序的每个主要部分(user-page.scss、admin.scsss 等)。
I tried making one application.scss and imported bootstrap as in the docs. I added the file in index.html after bootstrap.scss and before all my other scss files.
我尝试制作一个 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">
I get the following error:
我收到以下错误:
/usr/bin/scss --no-cache --update intro.scss:intro.css
error intro.scss (Line 22: Undefined mixin 'make-row'.)
So it seems it does not find bootstrap. It works if I import bootstrap in each file. Is this the right apporach? I think not. I get problem when I try to manually override a bootstrap variable.
所以它似乎没有找到引导程序。如果我在每个文件中导入引导程序,它就会起作用。这是正确的方法吗?我想不是。当我尝试手动覆盖引导变量时出现问题。
How can I have several scss files and only import bootstrap once?
我怎样才能有多个 scss 文件并且只导入一次引导程序?
采纳答案by Josh KG
Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:
认为您将 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">
I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.
我假设这是来自您构建的 HTML 文件。您的 HTML 不知道 SCSS 文件是什么。您的 SCSS 必须先处理成 CSS 文件,然后才能在最终的 HTML 文件中使用。
The way to import an SCSS file is to use that import command inside the parent SCSS fileat the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:
导入 SCSS 文件的方法是在顶部的父 SCSS 文件中使用该导入命令。因此,如果您的主要 SCSS 文件是application.scss,那么在其顶部,您导入其他 SCSS 文件:
@import "bootstrap";
But you need to make sure that the _bootstrap.scssfile is in the same directory as your application.scssfile for this import to work.
但是您需要确保该_bootstrap.scss文件与您的application.scss文件位于同一目录中,以便此导入工作。

