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

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

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

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

---

template.scs可以使用

@import“common”

导入_common.scs，但是是否可以让更多的_styles.scs导入_common.scs？我尝试了一些不同的方法，包括

@import./sub\u directory\u a/common“

和

@import./sub\u directory\u a/\u common.scss”

，但似乎没有任何效果。

这是半个答案。

---

签出后，您可以使用它将

\u common.scss

放在

partials

文件夹中，然后使用

@import common

导入它，但它可以在每个文件中工作。

您可以使用Ruby code中的

-I

命令行开关或选项将

子目录添加到Sass的加载路径。因此，如果您正在从
根目录运行Sass，请执行以下操作：

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

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

然后，您只需在
更多样式中使用
@import“common”
。SCS
看起来对SASS的一些更改使您最初尝试的操作成为可能：

@import "../subdir/common";

我们甚至在位于
c:\projects\sass
中的一些完全不相关的文件夹中使用了此功能：

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

只需添加足够的
。/
，以确保最终位于驱动器根目录下，并且可以继续使用

当然，这个解决方案并不完美，但我无法从一个完全不同的文件夹进行导入，既不能使用
I c:\projects\sass
，也不能将环境变量
sass\u PATH
（from:）设置为相同的值

@导入“C:/xampp/htdocs/Scss_插件/Bootstrap/Bootstrap”

@导入“C:/xampp/htdocs/Scss_addons/Compass/Compass”
 Gulp将完成监视您的sass文件以及使用includePaths添加其他文件路径的工作。
例如：

我遇到了同样的问题。从我的解决方案中，我进入了这个领域。下面是您的代码：

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

据我所知，如果要将一个SCS导入另一个SCS，它必须是部分SCS。当您从不同的目录名称导入您的
more\u styles.scss
到
\u more\u styles.scss
时。然后像这样将其导入到您的
模板.scss
。@import
。/sub\u directory\u b/\u more\u styles.scss
。这对我有用。但是正如你提到的
。/sub\u directory\u a/\u common.scss
不起作用。这与
template.scss
的目录相同。这就是它无法工作的原因。
使用带有sass loader的webpack，我可以使用
~
引用项目根路径。例如，假设OPs文件夹结构，并且您位于sub_目录_b中的文件中：

@import "~sub_directory_a/_common";

文档：
所选答案不能提供可行的解决方案

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

当我第一次遇到这个问题时，我想SASS可能会给你一个全局变量，类似于节点的
\uuu dirname
，它保持到当前工作目录的绝对路径（
cwd
）。不幸的是，它不是，原因是
@import
指令上的插值是不可能的，因此不能执行动态导入路径

根据

您需要在Sass配置中设置
：加载路径。由于OP使用指南针，我将根据文档进行说明

您可以根据需要使用CLI解决方案，但为什么？将其添加到
config.rb
更方便。使用CLI覆盖
config.rb
（例如，不同的构建场景）是有意义的

因此，假设您的
config.rb
位于项目根目录下，只需添加以下行：
add\u import\u path'sub\u directory\u a'

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

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

附录
您可能会遇到这样的情况：您希望以嵌入式方式导入CSS文件，即不是通过CSS提供的现成指令，而是CSS文件内容与SASS的实际合并。还有一个问题，答案是不确定的（解决方案不能跨环境工作）。因此，解决方案是使用SASS扩展

安装后，将以下行添加到配置中：
需要“sass css导入器”
，然后，在代码中的某个地方：
@import'css:myCssFile'

请注意，必须省略扩展才能使其正常工作。

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

add\u import\u path Sass:：CssImporter:：Importer.new（'sub\u directory\u a'）

现在一切都会好起来的

附言。，
我注意到
sass css importer
文档表明，除了省略
.css
扩展名之外，还需要
css:
前缀。我发现不管怎样它都能工作。有人启动了一个，到目前为止还没有得到答复。
导入一个具有不同相对位置的嵌套导入的
.scss
文件将不起作用。建议的首要答案（使用大量的
。/
）只是一个肮脏的攻击，只要您添加足够的
。/
，以到达项目部署操作系统的根目录，它就会起作用

添加目标SCSS路径作为SCSS编译器的搜索目标。
这可以通过将样式表文件夹添加到scss配置文件中来实现，这是您正在使用的框架的功能
使用
：加载路径
@import "{}/node_modules/module-name/stylesheet";

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

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