代码之家 › 专栏 › 技术社区 › ccprog

来自web的文件的节点sass自定义导入程序不工作

node-sass sass node.js

1

ccprog · 技术社区 · 4 年前

我正在尝试将一个样式表从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())})

这个 node-sass spec 说内容应该作为

有钥匙的物体 contents 其值是样式表的内容(在SCSS语法中)。这将导致Sass加载该样式表的内容。

我可以看到importer函数被调用,解析请求并在 目录 变量。输出被写入控制台,但仍然具有原始的 @import 线路。

哪里出了问题?

编辑: 如果使用节点sass,则节点会与消息一起崩溃 Speicherzugriffsfehler . 将旧库更改为 sass ,则不会发生崩溃,但未解析导入的错误仍然存在。

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

0 回复 | 直到 4 年前

1

ccprog 4 年前

我在仔细检查了dart sass库之后找到了一个解决方案。似乎是以 http(s):// 协议永远不会传递给导入程序函数。

所以你得耍点小把戏,这不是一个普遍的解决方案。

在 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";

然后,抓住 fonts 在importer函数的开头:

    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}));
        });
      }
    },

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

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