0

I'm looking at the official documentation for including Twitter Bootstrap in Rails, and one of the item that caught me off guard was this:

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

My question is, what is the correct way to import other stylesheets? Would I create other *.scss files, and then use the @import directive to include them? That is what the documentation seems to imply. If this is the case, how do I import files that are not in the same directory as the file in which I am using the @import directive?

Thanks!

Steven L.
  • 2,045
  • 3
  • 18
  • 23

3 Answers3

1

You'll benefit reading this.

It's the old "backwards compatibility" issue - CSS doesn't support mixins / variables, so using the manifest directive won't allow you to use a bunch of functionality.

SCSS is a preprocessor which means that it runs to "compile" your SCSS files into bona-fide CSS, mixins & variables being used then deleted.

--

If you want the benefit of using mixins & extended functionality of SCSS, you'll have to make your application file SCSS (as this calls the dependents):

#app/assets/application.scss
@import "bootstrap" -> SCSS file
@import *           -> will call all stylesheets in /stylesheets dir (CSS or other)

Because the other CSS files don't need any preprocessing from SCSS, they'll just be called as-is. If you need any specific SCSS functionality, change the file extension to .scss:

The file extensions used on an asset determine what preprocessing is applied.

Community
  • 1
  • 1
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
0

OK so I decided to fire up a test rails application and figure this out on my own.

Yes, you use the @import directive to add other SCSS files.

If the SCSS file you want to add is in a different directory, provide the relative path name to the file, relative to the file in which you are using the @import directive.

Always remember that you don't include the *scss extension when using the @import directive. SCSS is smart enough to find it.

Steven L.
  • 2,045
  • 3
  • 18
  • 23
0

Here is how I work with bootstrap-sass

  1. Don't change application.css to application.scss and don't change anything in application.css at all
  2. Create a file app/assets/stylesheets/main.scss

  3. main.scss add the following two lines

    @import "bootstrap-sprockets"; @import "bootstrap";

Vikram Sharma
  • 526
  • 5
  • 14