使用 SystemJS 即时转译 SASS

Posted 2023-03-07

【中文标题】使用 SystemJS 即时转译 SASS

【英文标题】：Transpiling SASS on the fly with SystemJS

【发布时间】：2017-02-18 22:20:50

【问题描述】：

我读过很多博客说 SystemJS 和 SASS 转译有效，但我在网上看到的每个示例似乎都预先处理了 SASS 处理（通过类似 gulp 的任务运行器），然后 javascript 代码导入生成的 CSS .

我希望能够让我的 JavaScript 文件直接导入 SASS 文件（并让我的 SystemJS 加载器即时转译成 CSS）。这仅用于开发目的，对于生产，我计划构建一个包含所有内容的静态文件。这可能吗？如果是这样，这通常是如何完成的？

附加信息：我也在使用 Angular2 和 Typescript。

谢谢。

【问题讨论】：

SystemJS 有几个 SASS 插件，但都假定在设置中也使用了 JSPM。欢迎单独为 SystemJS 提供经过验证的解决方案

我以前使用过JSPM，能力非常有限。我对它的理解是它主要用于管理包/别名，管理systemjs配置文件等。我认为当“橡胶上路”（例如运行Web应用程序）时，JSPM没有发挥积极作用.

首先不清楚在这种情况下应该如何安装插件。这是一个例子github.com/mobilexag/plugin-sass

@estus 至于我的插件描述很清楚。您是否更详细地描述了您的困难？

@MikeVitik 是的，描述假定在设置中使用了 JSPM。我很感兴趣如何在没有 JSPM 的情况下使用它（例如在 Plunker 中）。

【参考方案1】：

要“即时”将 SASS 转译成 CSS，您需要客户端 SASS -> CSS 转译器。

根据this answer 没有官方的实现可以帮助你。

或者，您可以考虑 LESS 而不是 CASS（例如使用 this 插件），这样您就可以将完整的客户端转译用于开发目的，并通过 SystemJS Builder 进行服务器端预构建以用于生产构建。