Rails Sass:变量不会与@import一起传递

Question

我有一个使用twitter bootstrap和sass的rails项目.scss文件被构造成文件夹,所以我有一个更好的概述.现在我想为包含我的颜色等的全局变量定义一个文件,并将这些值传递给其他文件,这样我的冗余代码就少了.虽然所有代码都已正确导入和应用,但变量不起作用.

这是当前的设置:

样式表/ application.css.scss

/*
 *= require_self
 *= require_tree
 */


/*
stylesheets/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _messages.scss    # Nachrichten
|   |– _dropdown.scss    # Dropdown
|
|– helpers/
|   |– _globals.scss     # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers

//more files omitted
|
|– vendors/
|   |– _bootstrap_and_overrides.css   # Bootstrap
|   |– _scaffolds.scss   # Bootstrap

|
|
`– main.scss             # primary Sass file
*/

我没有使用= require方法,因为它不允许使用变量和mixins(我想使用它).

我还使用了包含所有导入的main.scss.样式表/ main.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import "helpers/globals";

@import "base/normalize";
@import "base/grid";
@import "base/typography";

@import "components/buttons";
@import "components/tables";
//other files omitted

helpers/globals.scss包含颜色定义:stylesheets/helpers/globals.scss

$background-light : #4e4d4a;

文件component/tables.scss应该使用该变量.

.table-striped > tbody > tr:nth-child(2n+1) > {
  tr, td, th {
    background-color: $background-light;
  }
}

根据网络上的大多数信息和官方SASS指南,这应该在我声明变量并在使用它的文件之前导入相应文件时起作用.当然,找不到变量: Undefined variable: "$background-light".

整个过程看起来相当简单,但我的想法已经不多了.我是否需要在环境文件中设置某些内容,还是需要更改application.css.scss？或者可能在这里引导干扰？

在此先感谢您的帮助.

Answer 1

尝试*= require_tree从你的application.css.scss.删除.使用require不适用于sass文件,尤其是与...结合使用时@import.

main.scss删除require_tree时,请不要忘记导入/要求您的文件.

https://github.com/rails/sass-rails#important-note

Answer 2

如上所述，我最近经历了一些资产未按预期工作的经历。我收到的建议是使用：

rake assets:clobber

这将清理管道。

https://github.com/rails/sprockets-rails/blob/master/README.md