在SASS中，是否可以从另一个目录导入文件？例如，如果我有这样的结构：

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

template.scss可以使用@import "common"_common.scss导入，但more_styles.scss是否可以导入_common.scss？我尝试了一些不同的东西，包括@import "../sub_directory_a/common"和@import "../sub_directory_a/_common.scss"，但似乎没有任何工作。

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

@import "../subdir/common";

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

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

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

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

您可以使用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。

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

@import "~sub_directory_a/_common";

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

导入.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";

选择的答案无法提供可行的解决方案。

OP的做法似乎不规范。共享/公用文件通常partials位于标准样板目录下。然后，您应该将partials目录添加到配置导入路径，以便解析代码中任何位置的局部。

第一次遇到此问题时，我发现SASS可能为您提供了一个类似于Node的全局变量__dirname，该变量保留了当前工作目录（cwd）的绝对路径。不幸的是，并非如此，原因是因为@import无法指令，因此您无法执行动态导入路径。

根据SASS文档。

您需要:load_paths在Sass配置中进行设置。由于OP使用Compass，因此我将按照此处的说明进行操作。

您可以按预期使用CLI解决方案，但是为什么呢？将其添加到中更加方便config.rb。使用CLI进行覆盖是有意义的config.rb（例如，不同的构建方案）。

因此，假设您的 config.rb位于项目根目录下，只需添加以下行： add_import_path 'sub_directory_a'

现在@import 'common';在任何地方都可以正常工作。

虽然这可以回答OP，但还有更多。

附录

您可能会遇到想要以嵌入式方式导入CSS文件的情况，也就是说，不是通过普通的@importCSS指令直接提供的，而是通过CSS内容与您的SASS 的实际合并来导入的。还有另一个问题，这个问题无法得出结论（解决方案无法在跨环境下工作）。然后的解决方案是使用此 SASS扩展。

安装require 'sass-css-importer'后，将以下行添加到您的配置中：然后在代码中的某个位置：@import 'CSS:myCssFile';

请注意，必须省略该扩展名才能起作用。

但是，当尝试从非默认路径导入CSS文件时，我们会遇到相同的问题，add_import_path并且不考虑CSS文件。因此，要解决此问题，您需要在配置中添加另一行，这自然很相似：

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

现在，一切都会很好地进行。

PS，我注意到sass-css-importer文档表明CSS:除省略.css扩展名外，还需要前缀。我发现它不管用。有人提出了一个问题，至今仍未解决。

Gulp会负责观察您的sass文件，并使用includePaths添加其他文件的路径。例：

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});

node-sass（的官方SASS包装器node.js）提供了命令行选项--include-path来满足此类要求。

例：

在package.json：

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

现在，如果您src/styles/common.scss的项目中有文件，则可以使用@import 'styles/common';项目中的任何位置一起。

有关更多详细信息，请参阅https://github.com/sass/node-sass#usage-1。

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

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

例如：

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

这是一个半答案。

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

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

- 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。这就是为什么它不起作用的原因。

查看使用includePaths参数...

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

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

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

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

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

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