what should application.scss look like when using bootstrap-sass ruby on rails

Question

when using bootstrap-sass the documentation says to:

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

my current application.scss looks like

 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "*";

the problem is if I want to override bootstrap styles i have to use !important and i cant access bootstrap mixins and variables

so what should application.scss look like when using bootstrap-sass

Answer 1

1. About require

*= require_self means use this file (application.scss)

*= require_tree . means use all file on folder(tree) stylesheets

In my opinion, you should and use require all file on tree instead require_tree. Since with require file by file, you can control the order of which file you want to run.

So keep *= require_self and remove *= require_tree . and require all file you need.

My example application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require nprogress
 *= require nprogress-bootstrap
 *= require nprogress-turbolinks5
 *= require global    
 *= require articles
 *= require search
 *= require footer
 *= require header
 *= require contacts
 *= require notices
 *= require aui-flash
 *= require_self
 */


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

2. Override bootstrap styles

To override bootstrap styles, follow this customize

Another way to change style bootstrap is, put an ID to parent of item or its self which you want to change

Ex:

You have <button class="btn btn-primary">Hello</button>

Now you want to change class btn-primary to background-color: red

You can try <button class="btn btn-primary" id="red-primary">Hello</button>

And your style:

#red-primary.btn-primary{
  background-color: red;
}

But with this way, every you want to override style, the item must be has a ID. May be not good.

UPDATE 1

If you want to use sass. In you application.sass

@import nprogress
@import global
@import articles