使用 LESS 从绝对外部 url 注入 css 内容

Question

我需要将来自外部资源的 css 包含到我的结果 css 中。我使用 LESS 预处理器。

有办法吗？例如，

.wrapper {
  @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}

但这对我不起作用。我得到相同的 css:

.wrapper {
  @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}

我希望它是：

.wrapper .hljs-comment {
  color: #687d68;
}
.wrapper .hljs-variable,
.wrapper .hljs-attribute,
/* etc. */

Answer 1

CSS 文件通过保留 @import 指令原样导入。如果您希望 CSS 文件被视为 LESS 文件（即内联和命名空间），您应该使用 @import (less):

.wrapper {
  @import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}

你应该知道，每次编译 less 文件时都会下载该文件，因此编译性能不是最佳的。

Inject css content from absolute external url using LESS