I know that the issue was talked about few times but I still can't find one proper way.
I use less and I have bootstrap.less (no gem), global.less, variables.less, login.less. All in app/assests/stylesheet directory.
My application.less looks like this:
*= require 'bootstrap'
*= require 'global'
*= require 'login'
and including:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
I was trying to use: rake assets:clean assets:precompile
I was trying to @import in many ways
Issues I have: login.less and global.less don't see variables until I @import it. I can't override bootstrap directives without !important and it confuses me so much. Even if I import them in correct order to my application.less it still generates one big application.css where bootstrap is at the end. I don;t get it.
I want to have my less files in correct order to override it as I want. It will be good if it compiles to one file to make browser load website faster (I though that require does it but it doesn't look so)
Please advice what should I do. I lost my day on this issue.
If you want to change bootstrap vars and use variables/mixins across the files you should create a file called bootstrap_and_overrides.less there you import all your other files and bootstrap in correct order.
This single file should be required in application.css (plus any other files, like query-ui.css, etc). You should not include bootstrap files in application.css though.
You could also just it application.css.less but I had some problems with that approach.