SASS Импортирование в неправильном порядке

Question

У меня в настоящее время проблема с SASS. При использовании оператора @import он, похоже, не подтверждает, что я импортирую определенный файл перед другими, в результате чего некоторые veriales не должны быть объявлены. Я пытаюсь внести некоторые простые изменения в Bootstrap. Структура папок выглядит следующим образом:

Мой app.scss является основной точкой входа, которая выглядит следующим образом:

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts 
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap 
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome 

//Bootstrap style changes 
@import "variables"; 

@import "components/alerts"; 
@import "components/buttons"; 
@import "components/dropdowns"; 
@import "components/forms"; 
@import "components/labels"; 
@import "components/navbars"; 
@import "components/pagination"; 
@import "components/panels"; 
@import "components/progress"; 

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

Answer 1

Если вы хотите перезаписать переменные Bootstrap по умолчанию, вам необходимо импортировать свой файл перед фактической переменной начальной загрузки. Это потому, что у всех их переменных есть флаг !default. Это означает, что если переменная уже назначена, в следующий раз, когда вы попытаетесь ее повторно назначить, она проигнорирует это (если только у нее не было переменной, назначенной в первую очередь).

Например, допустим, что в самозагрузки-х _variables.scss парциальное есть:

$brand-primary: #555555 !default;

... то в следующем файле импортируемого после, вы назначаете что-то еще $brand-primary будет игнорируется - даже если вы снова укажете флаг !default.

Так вот почему вам нужно перезаписать переменную до bootstrap делает это.

например.

// custom-bootstap.scss contents: 

// Core variables and mixins 
@import "custom/bootstrap/variables"; // custom/overwritten variables 
@import "bootstrap/variables"; 

@import "bootstrap/mixins"; 
... 

и внутри custom/bootstrap/variables:

`$brand-primary: #000000!default;`