SASS导入顺序错误 [英] SASS Importing In Wrong Order

问题描述

我目前在使用 SASS 时遇到问题.在使用 @import 语句时，它似乎没有承认我在其他文件之前导入了某个文件，导致某些变量没有被声明.我正在尝试对 Bootstrap 进行一些简单的更改.文件夹结构如下:

I'm currently having an issue with SASS. When using the @import statement, it doesn't seem to acknowledge that I am importing a certain file before the others, causing some variables not to be declared. I am trying to make some simple changes to Bootstrap. The folder structure is as follows:

我的app.scss是主入口点，如下:

My app.scss is the main entry point, which is as follows:

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

问题是，变量文件根本没有被导入，也没有在其他文件被加载之前被导入.这是一件相当奇怪的事情，我似乎无法弄清楚.如果您能提供任何帮助，我将不胜感激:)

The issue is, the variables file isn't being imported either at all or before the other files are being loaded. This is a rather odd thing that I can't seem to figure out. I'd appreciate any help you can provide :)

推荐答案

如果你想覆盖默认的 Bootstrap 变量，你需要在实际的 Bootstrap 变量部分之前导入你的文件.这是因为它们的所有变量都有 !default 标志.这意味着如果一个变量已经被赋值，下次你尝试重新赋值时，它会忽略它(除非它首先没有分配变量).

If you want to overwrite default Bootstrap variables, you need to import your file before the actual Bootstrap variable partial. It's because all their variables have !default flag. It means that if a variable has already been assigned to, the next time you try to re-assign it, it will ignore that (unless it didn't have a variable assigned in the first place).

例如，假设在引导程序的 _variables.scss 部分中有:

For example, let's say that in bootstrap's _variables.scss partial there is:

$brand-primary: #555555 !default;

...然后在您之后导入的下一个文件中，您将其他内容分配给 $brand-primary 它将被忽略 - 即使您指定了 !default 再次标记.

...then in the next file that you import after, you assign something else to $brand-primary it will be ignored - even if you specify the !default flag again.

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

So that's why you need to overwrite variable before bootstrap does this.

例如

// 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;`

这篇关于SASS导入顺序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！