Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap and Rails

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 0

    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.

    Login or Signup to reply.
  3. 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”;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search