附录

Question

在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"，但似乎没有任何效果。

Answer 1

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

@import "../subdir/common";

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

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

只需添加足够的../以确保您最终会在驱动器根目录上运行，然后就可以了。

当然，这个解决方案远非漂亮，但我无法从完全不同的文件夹中导入工作，既不使用I c:\projects\sass也不设置环境变量SASS_PATH（来自：{ {3}}）相同的值。

Answer 2

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

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

然后，您只需在@import "common"中使用more_styles.scss。

Answer 3

使用带有sass-loader的webpack我可以使用〜来引用项目根路径。例如，假设OPs文件夹结构并且您位于sub_directory_b中的文件中：

@import "~sub_directory_a/_common";

请参阅sass-loader自述文件中的Usage / Imports下的内容：https://github.com/webpack-contrib/sass-loader

Answer 4

导入具有不同相对位置的嵌套导入的.scss文件将无法正常工作。最常见的答案（使用大量../）只是一个肮脏的黑客，只要你添加了足够的../来到达你项目的部署操作系统的根目录就可以了。

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

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

使用以下代码scss-config.json代码fourseven/meteor-scss

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

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

示例，使用fourseven/meteor-scss，您可以使用{}突出显示根据以下示例
，您的项目的最高级别

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

Answer 5

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

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

Answer 6

选定的答案没有提供可行的解决方案。

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

当我第一次遇到这个问题时，我认为SASS可能会给你一个类似于Node __dirname的全局变量，它保留了当前工作目录（cwd）的绝对路径。不幸的是，它没有，原因是因为@import指令上的插值是不可能的，因此你不能做一个动态的导入路径。

根据SASS docs。

您需要在Sass配置中设置:load_paths。由于OP使用Compass，我将按照文档here进行操作。

您可以按照目的使用CLI解决方案，但为什么？将它添加到config.rb会更方便。使用CLI来覆盖config.rb（例如，不同的构建方案）是有意义的。

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

现在@import 'common';可以在任何地方正常使用。

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

附录

您可能遇到要以嵌入方式导入CSS文件的情况，也就是说，不是通过CSS提供的vanilla @import指令开箱即用，而是 actual < / em>将CSS文件内容与您的SASS合并。还有另一个question，没有得到回答（解决方案不适用于跨环境）。然后，解决方案是使用this SASS扩展。

安装完成后，在配置中添加以下行：require 'sass-css-importer'，然后在代码中的某处：@import 'CSS:myCssFile';

请注意，必须省略扩展才能使其生效。

但是，在尝试从非默认路径导入CSS文件时，我们会遇到同样的问题，add_import_path不尊重CSS文件。所以要解决这个问题，你需要在配置中添加另一行，这自然是相似的：

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

现在一切都会很好用。

P.S。，我注意到sass-css-importer文档指出除了省略CSS:扩展名外，还需要.css前缀。我发现它无论如何都有效。有人开始issue，到目前为止还没有答案。

Answer 7

要定义要导入的文件，可以使用所有文件夹常用定义。您只需要知道它与您定义的文件相关。有关导入选项的更多信息，您可以查看here。

Answer 8

node-sass（node.js的官方SASS包装器）提供了一个命令行选项--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。

Answer 9

这是半答案。

结帐Compass，您可以将_common.scss放在partials文件夹中，然后使用@import common导入，但它适用于每个文件。< / p>

Answer 10

我遇到了同样的问题。从我的解决方案，我进入了这个。所以这是你的代码：

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

据我所知，如果你想将一个scss导入另一个scss，它必须是部分的。当您从不同的目录名称导入more_styles.scss到_more_styles.scss时。然后将其导入您的template.scss，就像这样@import ../sub_directory_b/_more_styles.scss。它对我有用。但正如你提到../sub_directory_a/_common.scss无效。这是template.scss的目录。这就是它无法工作的原因。

Answer 11

使用includePaths参数...

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

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

Answer 12

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

例如：

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

Answer 13

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

Answer 14

在现代版本的Sass中（至少为1.17.3），它的工作原理实际上与预期的一样：您可以在其中的../中使用相对路径，而在其中框。

如今，current accepted answer中发布的恐怖信息或任何其他设置指令或插件都不再需要。

Answer 15

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

@import＆＃34; C：/ xampp / htdocs / Scss_addons / Bootstrap / bootstrap＆＃34 ;;

@import＆＃34; C：/ xampp / htdocs / Scss_addons / Compass / compass＆＃34 ;;

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

15 个答案:

附录