How to import bootstrap-sass once and use it in multiple files?

Question

In the docs you can read the following:

Import Bootstrap into a Sass file (e.g. application.css.scss) to get all Bootstrap styles, templates, and variables!

@import "bootstrap"; 

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

I have several scss files. One for each main section of my application (user-page.scss, admin.scsss, etc.).

I tried to make one application.scss and imported bootstrap, as in the docs. I added the file to 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 that he does not find the boot file. It works if I import bootstrap into every file. Is this the correct uploast? I think no. I get a problem when I try to manually override the bootstrap variable.

How can I create multiple scss files and only import bootstrap once?

Answer 1

I think you are mixing SCSS imports with CSS HTML links. So this bit is wrong here:

 <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 embedded HTML file. Your HTML does not know what a SCSS file is. Your SCSS must be processed into a CSS file before it can be used in your final HTML file.

The way to import the SCSS file is to use this import command inside the parent SCSS file at the top. Therefore, if your main SCSS file is application.scss , then on top of that you import 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.