Как должен выглядеть application.scss при использовании bootstrap-sass ruby ​​на рельсах

Question

При использовании bootstrap-sass документация говорит:

удалите все *= require_self и *= require_tree . заявления из файла SASS. Вместо этого используйте @import для импорта файлов Sass.

мое текущее 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 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 "*";

проблема в том, что если я хочу переопределить стили начальной загрузки, я должен использовать! Important и не могу получить доступ к миксинам и переменным начальной загрузки

так как должно выглядеть application.scss при использовании bootstrap-sass

Answer 1

1. О требовании

*= require_self значит использовать этот файл (application.scss)

*= require_tree . означает использовать весь файл в папке (дереве) stylesheets

На мой взгляд, вы должны и использовать требуют все файлы на дереве вместо require_tree, Так как с помощью запроса файл за файлом вы можете контролировать порядок, какой файл вы хотите запустить.

Так держать *= require_self и удалить *= require_tree . и требует все файлы, которые вам нужны.

Мой пример 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. Переопределить стили начальной загрузки

Чтобы переопределить стили начальной загрузки, выполните следующие действия.

Другой способ изменить стиль начальной загрузки состоит в том, чтобы установить идентификатор для родительского элемента или его самого, который вы хотите изменить.

Пример:

У тебя есть <button class="btn btn-primary">Hello</button>

Теперь вы хотите изменить класс btn-primary в background-color: red

Ты можешь попробовать <button class="btn btn-primary" id="red-primary">Hello</button>

И твой стиль:

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

Но при этом способе, при котором вы хотите переопределить стиль, элемент должен иметь идентификатор. Может быть не хорошо.

ОБНОВЛЕНИЕ 1

Если вы хотите использовать sass, В вашем приложении.

@import nprogress
@import global
@import articles