SCSS 导入相对于导入的样式表？答案

【问题标题】：SCSS import relative to an imported stylesheet?SCSS 导入相对于导入的样式表？
【发布时间】：2013-12-28 07:42:55
【问题描述】：

我在我的 Rails 应用程序中安装了foundation-rails 并运行rails g foundation:install。项目特定文件（主要是foundation_and_overrides.scss）已正确安装。 gem 在那里并且安装没有问题，并且依赖项（SASS，Compass）也在那里。但我得到：

Error compiling CSS asset
SASS::SyntaxError: File to import not found or unreadable: global.

来自：

/Users/local/.rvm/gems/ruby-2.0.0-p353/gems/foundation-rails-5.0.2.0/vendor/assets/stylesheets/foundation/components/_accordion.scss:1

经过调查，我发现_accordion.scss 在foundation.scss 主文件中是@imported，位于stylesheets/ 中的两个目录：

@import 'foundation/components/accordion'

同时，“丢失”文件_global.scss 位于同一目录中。如果我随后将_accordion.scss 中的@import 代码从@import 'global' 更改为@import 'foundation/components/accordion'，它会清除并转到下一个错误（这里有很多子导入）。

很明显，发生的事情是 SASS 正在寻找相对于顶部样式表 foundation.scss 的 _global.scss，而不是相对于请求它的导入样式表 (_accordion.scss)。

我无法想象这是 Foundation/Foundation-Rails 中的错误——这个 gem 对任何人都不起作用——我不想自己修改 gem 的内容。

所以我的问题是：我是否必须更改一些 SASS 设置以允许 @import 相对于导入的样式表？我不想修改此 gem 以使其正常工作（我希望允许以后对 gem 进行更新）。

编辑

说明 gem 的 vendor/assets/stylesheets 目录中的目录结构：

foundation.scss
foundation/components/_accordion.scss
foundation/components/_global.scss

编辑 2

您实际上可以在github 上看到 gem 的代码和结构

编辑 3

以为我已经解决了问题，但我没有：从 @import 更改为 =require 消除了错误，并包含了 Foundation 的 CSS。但是require 没有导入 Foundation 提供的 SCSS 功能——变量、mixins。无法以这种方式更改全局值，也无法从主样式表或其他 @imported 样式表中检索它们或混入。

【问题讨论】：

您能否澄清相关文件的位置，哪些文件正在导入哪些文件以及它们的导入语句是什么样的？听起来好像有foundation/_global.scss 和foundation/components/_accordion.scss。如果手风琴通过@import "global"; 导入全局，我预计会出现错误，但如果全局路径实际上是foundation/components/_global.scss，那么它应该可以正常工作。
后者是正确的。见编辑。
这在我看来像是一个错误，但我无法告诉您您会将错误报告发送到哪个项目。我在 Rails/Ruby 项目之外使用 Sass/Compass，因此 Foundation 看起来是正确编写的。您不会偶然发现任何与 Foundation 文件具有相似路径的杂散文件，对吗？
我不确定它有多大的错误——当我独立使用 SASS 时，我遇到了同样的行为：导入的文件需要为任何相关导入假定主文件的目录他们自己的。但我无法想象制作基金会的人刚刚忘记了这一点，并为每个人打破了这颗宝石。 Foundation-Rails git 也没有“问题”按钮，我可能会在这里提交。
顺便说一句，Compass 的导入方式相同：github.com/chriseppstein/compass/blob/stable/frameworks/compass/…

标签： ruby-on-rails sass zurb-foundation

【解决方案1】：

看起来 Foundation thinks 这是最好的解决方案：

在application.rb的主块中手动将Foundation的样式表子目录（每个子目录）添加到SASS的:load_paths中：

config.sass.load_paths += [
  "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components",
  "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/"
]

【讨论】：