5

I'm installing the bootstrap-sass gem and this line to do with application.scss confuses me.

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

Do I remove *= require_self and *= require_tree . and replace them with import '@require_self' and import '@require_tree .' or just remove them.

Also for any other imported files inside application.scss like

 *= require dataTables/jquery.dataTables
 *= require froala/froala_editor.min.css

should I change them to

 @import 'dataTables/jquery.dataTables'
 @import 'froala/froala_editor.min.css'

Just confused and would like a confirmation on what to do here.

Rob
  • 1,835
  • 2
  • 25
  • 53

2 Answers2

3

While using bootstrap-sass,remove everything from your application.scss and instead add the followings to it:

#"bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

If you wish to load additional scss/sass files then, you can @import them to application.scss
If you wish to load css files then, you can *= require them like the followings:

/*
*= require_self
*= require your_css_file
*/
@import "bootstrap-sprockets";
@import "bootstrap";
dp7
  • 6,651
  • 1
  • 18
  • 37
  • Ok so use `@import` on sass files and `*= require` on css files. Is that correct? – Rob Mar 18 '16 at 09:42
1

I faced a similar problem with the Bootstrap 4 Ruby Gem for Rails https://github.com/twbs/bootstrap-rubygem. Its instruction also contains the phrase:

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

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.

Here's a contradiction.

If I do what they tell me to - this means that I loose the opportunity to cancel bundling all my (s)css-files into a single application.scss (and a single application.css in the browser) while at the development stage. If I manually import all my scss-files inside application.css - that means that I inject each file's content into a bigger one and Sprockets has no longer control over such bundling - as I do it manually. And I don't like it - at the development stage as I can't clearly see which css-file this style came from.

So I chose another option - I left the application.css untouched, then I created a bootstrap_code.scss file (failed to name it bootstrap.scss as it confused Rails) with a @import "bootstrap"; directive inside and finally I created some z.scss file for my own styles - just to make sure they would come up AFTER the same bootstrap styles.

Of course, my solution has such a drawback that my scss-files can not

access the Bootstrap mixins and variables

(because Sprockets converts them into css giving them no chance to dive into Bootstrap scss first), but since I need just a plain css from Bootstrap that's OK for a moment.

Of course at the production stage I can return to the recommended approach described in the gem documentation ("remove all the *= require ...") should I really need the Bootstrap mixins and variables (something I usually do not need).

prograils
  • 2,248
  • 1
  • 28
  • 45