预编译SCSS:变量未定义(Rails 4)

Question

场景

在/products.css.scss中:

@import 'partials/colors';
@import 'partials/boxes';

#wrapper {}

在/partials/_colors.css.scss中:

$light-gray: #ccc;

在/partials/_boxes.css.scss中:

#box-light-gray {
  background-color: $light-gray;
  width: 50px;
  height: 50px;
}

问题

它发生rake assets:precompile在production环境中:

Sass :: SyntaxError:未定义的变量:"$ light-grey".(在/partials/_boxes.css.scss:2)

我的想法

文件/partials/_boxes.css.scss本身没有变量$light-gray- 在这里我必须同意rake assets:precompile.问题的关键是:我怎么做才能让rake认识的注入$light-gray到/partials/_boxes.css.scss？

我认为rake不符合拼图的要点,因为它不知道SCSS是如何工作的.我觉得我错过了与SCSS相关的东西rake.

Answer 1

对于当前版本的Sprockets和sass-rails来说,这是一个棘手的问题.您可能会认为文件中的*= require行application.css会按顺序加载变量,以便它们可供所有scss文件使用,但事实并非如此.以下是资产管道Rails指南中所说的内容:

如果要使用多个Sass文件,通常应使用Sass @import规则而不是这些Sprockets指令.使用Sprockets指令,所有Sass文件都存在于它们自己的范围内,使得变量或mixin仅在它们定义的文档中可用.您也可以使用@import" "执行文件通配,并使用@import"*/*"添加整棵树相当于require_tree的工作原理.查看sass-rails文档以获取更多信息和重要注意事项.

换句话说,您有两个选择:

• @import 您需要的每个文件中的变量
• @import在您的application.css.scss文件中使用而不是*= require

如果您选择第一个选项,请直接@import 'partials/colors';进入顶部_boxes.css.scss.

使用第二个选项,您只需要使用一次@import样式表application.css.scss(按照正确的顺序),然​​后mixins中的变量将可用于所有样式表.你仍然在这里使用资产管道,所以预编译仍然可以正常工作,但你正在让它的sass-rails工作变得神奇.你application.css.scss会看起来像这样:

@import 'partials/colors';
@import 'partials/*';
@import '*';

但要注意,目前有一个sass-rails 的错误.如果你有.erb样式表,如果它们位于一个单独的文件夹中,sass-rails将无法通过通配符导入它们.