Twitter bootstrap SASS以错误的顺序导入

我现在对SASS有意见。当使用

@import

语句时，它似乎没有确认我在导入某个文件之前导入了其他文件，导致一些变量没有被声明。我正在尝试对引导进行一些简单的更改。文件夹结构如下所示：

@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";

My

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";

---

问题是，变量文件根本没有导入，或者在加载其他文件之前没有导入。这是一件我似乎无法理解的相当奇怪的事情。非常感谢您提供的任何帮助：）

如果要覆盖默认引导变量，需要在实际引导变量部分之前导入文件。这是因为他们所有的变量都有

！默认

标志。这意味着，如果一个变量已经分配给了，下次您尝试重新分配它时，它将忽略该变量（除非它在第一个位置没有分配变量）

例如，假设在bootstrap的

\u variables.scss

部分中有：

$brand primary:#555555！违约

…然后在以后导入的下一个文件中，您将其他内容分配给
$brand primary
，它将被忽略-即使您指定了
！再次使用默认
标志

所以，这就是为什么您需要在引导程序执行此操作之前覆盖变量

e、 g

和内部
自定义/引导/变量
：

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

引导变量是用
声明的！默认
标志，这意味着覆盖这些变量的文件必须在Boostrap文件之前导入

什么是
！默认值
do？具有此标志的赋值仅在变量之前未声明时生效。也就是说，您的覆盖文件确实会更改这些变量（除非您也使用
！default
标志），但它会在Boostrap有机会实际使用这些变量后更改。例如：

/*  bootstrap/scss/_variables.scss */
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;

/*  bootstrap/scss/_alert.scss */
.alert {
  padding: $alert-padding-y $alert-padding-x; /* values are used */
}

/* your override */
$alert-padding-y: .5rem; /* values are changed, but a bit too late */
$alert-padding-x: 1rem;

“不起作用”并没有描述问题。您尚未显示您的预期结果，也未显示您将获得的结果。谢谢，这已解决此问题：）