SASS导入错误的顺序

Question

我目前遇到了SASS的问题.当使用@import语句时,它似乎并不承认我在其他文件之前导入某个文件,导致某些文件未被声明.我试图对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变量,则需要 在实际的Bootstrap变量partial 之前导入文件.这是因为他们所有的变量都有!default旗帜.这意味着如果已经为变量赋值,则下次尝试重新赋值时,它将忽略该变量(除非它首先没有分配变量).

例如,让我们说在bootstrap的_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;`