Sass 自定义导入

发布时间：2023-05-29 14:27:16 所属栏目：教程来源：

导读：通过前面的讲解我们知道，在 Sass 中可以通过 @import 或 @use 来导入文件内容、mixin 和函数等，它们都接收一个路径，Sass 会根据其路径来找到对应的文件。

除此之外 Sass 支持我们自定义导入器来完成各种我们想

通过前面的讲解我们知道，在 Sass 中可以通过 @import 或 @use 来导入文件内容、mixin 和函数等，它们都接收一个路径，Sass 会根据其路径来找到对应的文件。

除此之外 Sass 支持我们自定义导入器来完成各种我们想要的导入方式，导入的程序可以和普通的文件系统路径一起放置在 load_paths 数组中。自定义导入除了需要你对计算机文件系统有所了解外，不同的 Sass 实现需要你有其对应的编程语言功底，所以自定义导入我们只作为了解的内容。

使用场景
所有的 Sass 实现都提供了自定义导入的方法，通过自定义的导入方法可以控制 @imports 如何定位样式表。

node-sass 的自定义导入
node-sass 是提供了一个自定义导入器的选项，并将它作为了 JavascriptAPI 的一部分暴露了出来。使用它需要 node-sass v2.0.0 及以上的版本，从 v3.0.3 版本开始导入程序可以返回错误。我们举个例子来感受下：

var result = sass.renderSync({
file: '/path/to/file.scss',
data: 'body{background:blue; a{color:black;}}',
outputStyle: 'compressed',
outFile: '/to/my/output.css',
// 自定义导入
importer: function(url, prev, done) {
// url: 路径
// prev: 上一个解析路径
// done: 一个可选的回调函数
myImportFunction(url, prev, function(result){
done({
file: result.path,
contents: result.data
});
});
// OR
var result = myImportFunction(url, prev);
return {file: result.path, contents: result.data};
}
});
从上面的代码我们可以看到，在 node-sass 的自定义导入是通过 JavascriptAPI 来使用的，也就是我们上面配置的 importer ，importer 可以是一个函数也可以是一个函数数组， Sass 会按照数组中的顺序依次调用函数。

dart-sass 的自定义导入
dart-sass 是提供了一个可扩展的导入器的抽象类（ imorter class ），我们用过扩展这个类来实现自定义导入，对于我们前端工程师来说，使用 Dart 语言开发的并不多。不过在前端项目中使用 dart-sass 的话，我们可以使用类似上面 node-sass 的配置方法，所以这里我们仅举个在前端项目中使用 dart-sass 的例子来看一下：

var sass = require("sass");
var Fiber = require("fibers");
sass.render({
file: "input.scss",
importer: function(url, prev, done) {
// ...
},
fiber: Fiber
}, function(err, result) {
// ...
});

ruby-sass 的自定义导入
ruby-sass 为我们提供了一个抽象的基类 Sass::Importers::Base ，我们可以通过它来自定义导入器，扩展的子类的路径名需要使用 URL 格式，不过这需要很强的 Ruby 语言基础，这里我们就暂时不举例子了，否则看着会很迷惑，还有就是 ruby-sass 已经逐渐被官方弃用，所以你仅需要了解下就好。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!