How do I import bootstrap-sass once and use it in several files?

Question

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!

@import "bootstrap";

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

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.

<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?

Answer 1

Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:

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

The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:

@import "bootstrap";

But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.