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

嘗試從application.css.scss刪除*= require_tree 。 使用require對sass文件不起作用，特別是與@import結合使用時。

刪除require_tree時，不要忘記導入/需要main.scss文件。

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

Answer 2

注意上面，我最近有一些經驗資產沒有按預期工作。 我收到的建議是使用：

rake assets:clobber

這將清理管道。

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