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

进口 CSS

Eva西里蛋蛋

2020-03-18

在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",但似乎没有任何工作。

第2022篇《使用SASS时,如何从其他目录导入文件?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
神乐猴子 2020.03.18

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

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

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

JinJin猪猪 2020.03.18

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

例如:

"includePath": "node_modules/foundation-sites/scss",
Tony西门古一 2020.03.18

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

凯阿飞卡卡西 2020.03.18

查看使用includePaths参数...

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

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

神奇达蒙 2020.03.18

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

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

Stafan路易 2020.03.18

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

阳光小胖 2020.03.18

这是一个半答案。

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

→笑里藏刀↓ 2020.03.18

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

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

使用:load_pathsconfig.rd基于罗盘的框架(例轨)

使用下面的代码scss-config.jsonfourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}
  1. 使用绝对路径(相对路径)。

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

@import "{}/node_modules/module-name/stylesheet";
泡芙神奇 2020.03.18

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

@import "~sub_directory_a/_common";

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

猴子小哥 2020.03.18

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

小哥凯小小 2020.03.18

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

@import "../subdir/common";

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

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android