css - rails 萨斯 : variables are not passed with @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 方法，因为它不允许使用变量和混入(我想使用)。

我还使用了一个包含所有导入的 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 包含颜色定义: 样式表/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？或者 bootstrap 可能会干扰这里？

在此先感谢您的帮助。

Answer 1

尝试从您的 application.css.scss 中删除 *= require_tree。使用 require 不能很好地处理 sass 文件，尤其是与 @import 结合使用时。

当您删除 require_tree 时，不要忘记导入/要求您的 main.scss 文件。

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