使用变量的SASS导入路径

Question

我想使用变量导入一个文件。

我的代码（不起作用）:

$input-field-theme: default;
@import '#{$input-field-theme}';

错误信息: Error: 找不到或无法读取要导入的文件：#{$input-field-theme}

这个可以正常工作: @import 'default';

- tonymx227

---

可能是Can variables be used in import statements for Sass files?的重复问题。 - underscore_d

Answer 1

此时还不可能实现，请查看2012年GitHub上关于Sass问题的记录以获取更多信息。

其原因在于：

允许动态导入将完全破坏Sass快速确定哪些文件导入其他文件，以及需要重新编译什么的能力。

该线程还包括一个链接到另一个问题，其中包含2018年评论，讨论了动态依赖项的未来计划。

我现在将锁定这个问题，因为有很多噪音而没有增加太多价值。总结一下，这是计划： 新的@use指令将提供导入文件作为mixin的功能，因此您可以动态地决定是否以及在哪里包含它。这将使Sass更符合其他可以在没有动态导入的情况下运行良好的语言，因为这意味着导入不再具有不可避免的副作用。 我们将添加一个load()函数如上所述，它将允许样式表根据变量值在运行时加载文件。这将支持更复杂的用例，其中样式表需要根据用户输入进行加载，同时保留静态跟踪导入图和定义的mixin和函数的能力。

- Mario Araque

---

好的，谢谢。我会向导师请教如何实现这个功能。 - tonymx227

我阅读了4月19日的讨论。他们认为动态导入会使事情失控。另一方面，许多人卡在动态主题上，包括我。是的，CSS不是一种编程语言，我们希望能够控制事情，但SCSS的想法来自于CSS的限制。它使用变量和导入扩展了CSS，因此这将是他们决定发展项目的方式。现在，我们有另一个限制，如果有要求，人们可以通过SCSS或没有它找到方法。感谢他们在CSS之后使生活更轻松。 - Davut Gürbüz

如果我能像这样做些事情，我会非常喜欢：@import { myFontFile } from "../some-path/right-here/this-folder/this-file.ttf"; 然后在 @font-face{... url('data:font/truetype;charset=utf-8;base64, #{ myFontFile.readFile() }') } 中使用它。 - greensin

好吧，现在已经过去了7年，我们在这方面怎么样了？你能否提供一个使用@use的示例，或者解释一下为什么不行呢？ - jave.web

Answer 2

另一种解决方案是，如果您使用Gulp编译SASS文件，则需要在配置中引入includePaths。然后，一旦您从文件夹导入任何模块，它将考虑查看您已经在“includePaths”中引入的路径。

gulp.task(`compileSASS`, function () {
   return gulp.src(`styles/main.scss`)
    .pipe(sass({
        outputStyle: `expanded`,
        precision: 10,
        includePaths: [
            '../../../feature',
            '../../..',
        ]    
    })
    .pipe(gulp.dest(`temp/styles`));
    });

现在您已经设置了代码，可以从不同的路径导入文件：

 @import "promotion/code/styles/_promotion.scss";

要导入此文件，它将查看所有“includePaths”。

- Nelly Sattari

---

太棒了。在我的npm项目中它对我有效。非常感谢！ - klewis

Answer 3

Webpack与SASS-LOADER：https://webpack.js.org/loaders/sass-loader/#additionaldata

我们可以在sass-loader选项的prependData属性中进行添加：

{ 
  loader: 'sass-loader',
  options: {
    additionalData: '$env: ' + process.env.NODE_ENV + ';',
  }
}

注意： prependData 也可以是一个函数，它接收 loader-context。祝好运...

- Aakash

---

我使用这个方法，它运行良好 - 但请注意，在最新版本中，字段名称为additionalData而不是prependData：https://dev59.com/GGYr5IYBdhLWcg3wM3f6#63491672 - Venryx