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

Question

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

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

template.scss可以导入_common.scss,@import "common"但是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(从:: load_paths引用)设置为相同的值.

Answer 2

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

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具有不同相对位置的嵌套导入的文件将不起作用.最常见的答案(使用很多../)只是一个肮脏的黑客,只要你添加足够../的东西到达项目的部署操作系统的根目录就可以工作.

1. 添加目标SCSS路径作为SCSS编译器的搜索目标.这可以通过将stylesheets文件夹添加到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";

Answer 5

Gulp 将完成监视 sass 文件的工作，并使用 includePaths 添加其他文件的路径。例子：

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