时间戳

首页 > 解决方案 > 在 Rails 引擎中使用引导 sass 变量时，rake app:assets:precompile 出错

ruby-on-rails - 在 Rails 引擎中使用引导 sass 变量时，rake app:assets:precompile 出错

问题描述

我正在开发一个包含 bootstrap-sass 的 Rails 引擎。我正在尝试在我的样式中使用引导变量，但出现错误。我正在尝试遵循此处的文档：
https ://www.rubydoc.info/gems/bootstrap-sass/3.4.1

# test_engine.gemspec

# ...

  s.add_dependency "rails", ">= 5"
  s.add_dependency 'sassc-rails'
  s.add_dependency 'bootstrap-sass'
# ...

应用程序.scss：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 */

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

我已经为运行 rake 任务的虚拟应用程序定义了一个清单文件：
test/dummy/app/assets/config/manifest.js

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

我的引擎的清单文件：
app/assets/config/test_engine_manifest.js

//= link_directory ../javascripts/test_engine .js
//= link_directory ../stylesheets/test_engine .css

这是我尝试使用该变量的文件：

// _thing.scss

.thing {
  color: $brand-primary;
}

以及 rake app:assets:precompile 的输出

> ❯❯❯ rake app:assets:precompile                                                                                                            

rake aborted!
SassC::SyntaxError: Error: Undefined variable: "$brand-primary".
        on line 2:10 of app/assets/stylesheets/test_engine/_thing.scss
>>   color: $brand-primary;

   ---------^

不$brand-primary应该由引导程序定义吗？我错过了什么？

标签： ruby-on-railssassrails-enginesbootstrap-sass

解决方案

在你的 application.scss 文件中添加这一行

@import "bootstrap-variables";

希望这对你有用。谢谢你。

推荐阅读