Rails 5，Sass::SyntaxError 无法预编译资产答案

【问题标题】：Rails 5, Sass::SyntaxError cannot precompile assetsRails 5，Sass::SyntaxError 无法预编译资产
【发布时间】：2017-07-02 00:44:39
【问题描述】：

我已经开始了一个新项目 (Rails 5.0.0.1 && ruby 2.3.1p112 )，似乎无法让资产进行预编译。我目前的结构是这样的。

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

app/assets/stylesheets/application.scss

*
*= require_tree .
*= require font-awesome
*= require style
*= require_self
*/

app/assets/stylesheets/style.scss

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

// shared styling
@import 'shared/variables';
@import 'shared/content';
...
...

app/views/layout/application.html.haml

...
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
...

在我的 app/assets/stylesheets/helpers/_varibles.scss 文件中，我设置了一些变量

$font-family-standard: 'Arial', sans-serif;
$font-family-default: 'Open Sans', 'Arial', sans-serif;

$color-primary: #ff7e5b;
$color-gray: #898989;
$color-dark: #292c33;
$color-darker: #3f4248;

但是当我运行 rails server / 尝试运行 bundle exec rake assets:precompile 我得到这个：

be rake assets:precompile
rake aborted!
Sass::SyntaxError: Undefined variable: "$color-dark".
/Users/Nexus/Personal/Projects/Rubyfuza/rubyfuza/app/assets/stylesheets/helpers/_content.scss:3
/Users/Nexus/.rbenv/versions/2.3.1/bin/bundle:23:in `load'
/Users/Nexus/.rbenv/versions/2.3.1/bin/bundle:23:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

我不知道这里发生了什么。任何帮助都感激不尽。

【问题讨论】：

标签： css ruby-on-rails ruby sass

【解决方案1】：

您在 app/assets/stylesheets/helpers/_content.scss:3 中使用了未定义的 $color-dark 变量

需要在_content.scss中导入

@import 'shared/variables'

【讨论】：

嘿老兄，谢谢你回来找我；因为我的style.css 导入了所有助手，但@import 'shared/variables'; 是第一个。是否不将variables 加载到样式表中，从而使其对所有其他加载的文件也可用？

【解决方案2】：

你必须删除

= require_tree .

来自

/*
*
*= require_tree .
*= require font-awesome
*= require style
*= require_self
*/

存在于 app/assets/stylesheets/application.scss 中，因为资产管道继续编译样式表目录中存在的每个文件，导致需要使用 @import 指令来包含部分变量，这是 sass 的默认行为。但是，如果您按照上述方式进行操作，则可以防止这种情况发生。

【讨论】：