使用SASS时，如何从其他目录导入文件？

我遇到了同样的问题，我通过添加文件路径来找到解决方案，例如：

@import“ C：/ xampp / htdocs / Scss_addons / Bootstrap / bootstrap”;

@import“ C：/ xampp / htdocs / Scss_addons / Compass / compass”;

如果在Visual Studio中使用Web编译器，则可以将路径添加到includePatheditorconfig.json.defaults中。然后，../由于编译器将使用includePath作为查找导入的位置，因此不需要一定数量。

例如：

"includePath": "node_modules/foundation-sites/scss",

最好的方法是使用sass-loader。它作为npm软件包提供。它解决了所有与路径有关的问题，并使其非常容易。

查看使用includePaths参数...

“解析SASS @imports时，SASS编译器使用loadPaths中的每个路径。”

https://stackoverflow.com/a/33588202/384884

我遇到了同样的问题。从我的解决方案中我想到了这一点。所以这是您的代码：

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

据我所知，如果您想将一个scss导入另一个，则必须是局部的。从其他目录导入时，您的more_styles.scssto _more_styles.scss。然后将其导入到您的template.scss@import这样../sub_directory_b/_more_styles.scss。它为我工作。但是正如您提到的../sub_directory_a/_common.scss那样，它不起作用。那是的相同目录template.scss。这就是为什么它不起作用。

要定义要导入的文件，可以使用所有文件夹的通用定义。您只需要知道它与您正在定义的文件有关。您可以在此处查看有关导入选项的更多示例。

这是一个半答案。

检出Compass，您可以将其放置_common.scss在partials文件夹中，然后使用导入它@import common，但是它适用于每个文件。

导入.scss具有相对位置不同的嵌套导入的文件将不起作用。提出最多的答案（使用很多../）只是一个肮脏的技巧，只要您添加了足够多的技巧../以达到项目部署操作系统的根源即可。

1. 将目标SCSS路径添加为SCSS编译器的搜索目标。可以通过将样式表文件夹添加到scss配置文件中来实现，这是您正在使用的框架的功能，

使用:load_paths在config.rd基于罗盘的框架（例轨）

使用下面的代码scss-config.json为fourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. 使用绝对路径（相对路径）。

例如，使用fourseven/meteor-scss，您可以{}按照以下示例突出显示项目的顶层

@import "{}/node_modules/module-name/stylesheet";

将webpack与sass-loader结合使用~，可以用来引用项目的根路径。例如，假设OPs文件夹结构为您位于sub_directory_b内部的文件中：

@import "~sub_directory_a/_common";

文档：https : //github.com/webpack-contrib/sass-loader#resolving-import-at-rules

您可以使用Ruby代码中的-I命令行开关或:load_paths选项将其添加sub_directory_a到Sass的加载路径。因此，如果您从中运行Sass root_directory，请执行以下操作：

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

然后，您可以简单地@import "common"在中使用more_styles.scss。

看起来对SASS的一些更改使您最初尝试做的事情成为可能：

@import "../subdir/common";

我们甚至可以将其用于位于以下位置的一些完全不相关的文件夹c:\projects\sass：

@import "../../../../../../../../../../projects/sass/common";

只需添加足够的内容../，以确保您将最终进入驱动器根目录，并且一切顺利。

当然，此解决方案远非完美，但是我无法使用完全不同的文件夹进行导入，既无法使用I c:\projects\sass环境变量SASS_PATH（也没有设置环境变量（来自：load_paths reference））并将其设置为相同的值。