node-sass自定义导入程序无法从web导入文件

Question

我正试图将样式表从Google字体导入到样式表中，以避免以后的eytra请求。

我的main.scss文件以开头

@import "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,400;1,700;1,900&family=Source+Code+Pro:wght@400;700&display=swap";

我期望由此产生的main.css从开始

@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxswWw.ttf) format('truetype');
}
/* etc */

为此，我有以下脚本：

var scss = require("node-sass");
var https = require('https');
function compile(filePath, dirs, callback){
scss.render({
file: filePath,
includePaths: dirs,
outputStyle: 'expanded',
sourceMap: false,
importer: [
function(url, prev, done) {
if (url.startsWith('https')) {
https.get(url, (res) => {
let contents = '';
res.on('data', (d) => contents += d);
res.on('end', () => {
console.log('scss')
done({contents})
});         
});
}
return null;
}
]
}, function (e, css) {
if (error) {
return callback(error)
}
callback(null, css.css)
});
}
compile('main.scss', null, (e, d)=>{console.log(d.toString())})

节点sass规范规定内容应以形式返回

一个具有关键字contents的对象，其值是样式表的内容(在SCSS语法中(。这导致Sass加载样式表的内容。

我可以看到importer函数被调用，解析请求，并在contents变量中有所需的样式表文本。输出被写入控制台，但仍然有原始的@import行。

这哪里出了问题？

编辑：如果使用node sass，则节点崩溃并显示消息Speicherzugriffsfehler。将已使用的库更改为sass后，不会发生崩溃，但未解析导入的错误仍然存在。

同样，尝试使用伪静态规则.bla {--blubb: green;}作为返回的内容也不起作用。

Answer 1

我在仔细检查了dart-sass库后找到了一个解决方案。以http(s)://协议开头的URL似乎从未传递给导入器函数。

所以你必须稍微欺骗一下，这不是一个广义的解决方案。

在main.scss文件中，缩短协议的URL：

@import "fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,400;1,700;1,900&family=Source+Code+Pro:wght@400;700&display=swap";

然后，在importer函数中捕获开头的fonts

importer: function(url, prev, done) {
if (url.startsWith('fonts')) {
https.get('https://' + url, (res) => {
let contents = '';
res.on('data', (d) => contents += d);
res.on('end', () => done({contents}));
});
}
},

注意一个重要的区别：在if子句之后没有return null;。这导致导入程序结果被传递，尽管它正确加载了文件内容。

整个解决方案只适用于(dart-(sass，而不适用于节点sass，由于某种原因，节点sass以无限循环结束。