指南针，添加导入路径

Posted 2023-03-06

【中文标题】指南针，添加导入路径

【英文标题】：Compass, adding import path

【发布时间】：2012-10-16 17:44:30

【问题描述】：

要在多个目录中编译 .scss 文件，我们需要使用“add_import_path”（http://compass-style.org/help/tutorials/configuration-reference/），但我不明白如何。

我已经尝试添加

additional_import_paths
add_import_path "_themes"
add_import_path = "_themes"
additional_import_paths = "_themes"

在我的 config.rb 中，但没有运气，Compass 仅从 sass_dir = "_modules"

编译

---

更新：是的，这一行

add_import_path "_themes"

没有给我们“找不到文件夹”错误，但 compass 仍然没有在其中编译 .scss

我做错了什么？

【参考方案1】：

这里有一个公认的答案，但我认为它不能回答问题，而是提供了另一种解决方案。这绝对没问题，我并不是要侮辱任何人，但这里没有关于 add_import_path 的信息以及它对您的作用。

如果有人曾经在 Magento 工作过，那么您应该熟悉它用于主题和模板文件的后备结构。为了设置使用相同默认皮肤的多个商店，我们需要包含一个后备结构，该结构将允许对预定义的层次结构进行更改。所以检查 dis config.rb 文件

myThemeA - config.rb

require "font-awesome-sass"
http_path = "/skin/frontend/rwd/myThemeA/"
add_import_path "../../../rwd/default/scss"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
fonts_dir = "../css/fonts"
relative_assets = true

output_style = :expanded
environment = :production
sourcemap = true

myThemeB - config.rb

require "font-awesome-sass"
http_path = "/skin/frontend/rwd/myThemeB/"
add_import_path "../../../rwd/default/scss"
additional_import_paths = ["../../../rwd/myThemeA/scss"]
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
fonts_dir = "../../myThemeA/css/fonts"
relative_assets = true

output_style = :expanded
environment = :production
sourcemap = true

所以这里的想法是我们有三个皮肤，我们可以使用导入路径只覆盖某些文件，而不是在每个皮肤中包含每个文件。这也意味着，当我们想要进行全局更改时，取决于我们更改的内容，我们没有进行 3 次更改——仅更改到它的依赖项位于链中的位置。

所以...

默认是所有皮肤的基础

myThemeA 本身就是皮肤，默认使用默认皮肤

myThemeB 使用 myThemeA 作为默认值，而 myThemeA 使用 default 作为默认值。

使这项工作有效的是add_import_path 和additional_import_paths 的位置。本质上，它使用首先定义的add_import_path 作为默认值，然后随后的additional_import_paths 数组将覆盖add_import_path 中的内容，但任何未包含在附加内容中的内容，它将在默认值中查找。

希望这对寻找有关导入路径的更多信息的任何人都有意义。

【讨论】：

我注意到 'add_import_path' 行为的一个导入方面：如果 sass 编译使用在导入路径中找到的文件，例如_framework.scss，然后是该文件中的任何导入，例如@import "var" 然后将相对于 that 文件，而不是我们所在的原始文件夹结构。这意味着（使用您的示例）如果您在 myThemeB 中有一个 _var.scss 文件，但是您在 myThemeB 中没有 _framework.scss 文件，那么它将不会使用您的 myThemeB _var.scss 文件。这很烦人，因为您必须在主题中包含文件，即使您没有更改它们。

不要偏离正题，但我相信这是 LESS 相对于 SASS/SCSS 的优势。延迟加载认为这个问题是惰性的，因为它将在编译中使用该变量的最新加载定义。我有一段时间没有和 Rudy SASS 一起玩了。似乎他们正在转向使用本质上是延迟加载的 CSS 变量？ github.com/sass/sass/issues/2119

Yorkshire Bear 所描述的是我今天在尝试设置 Plummer 所描述的主题环境时所经历的确切行为，我花了一段时间才意识到我想要实现的根本不是可能的。没有解决方法吗？

我已经有一段时间没有在 Ruby 中工作了，但是我在 Node 和 webpack 中做了类似的事情，方法是将导入的包分配给别名，然后通过环境变量覆盖别名的绝对路径。我讨厌只给你一个链接，但这可能有助于你走上正轨：blog.honeybadger.io/ruby-guide-environment-variables

【参考方案2】：

要编译多个.scss 文件，您应该使用@import "filename"; 将“子”文件导入“父”SASS 文件。

例如，如果您有 main.scss，您可能希望从名为 child.scss 的子样式表导入更多 CSS，如下所示：

@import "_modules/child";

据我了解，add_import_path 所做的只是允许您从其他目录导入文件。所以你也可以从_themes/@import

见this thread。