如何无需服务端编译器，在浏览器中编译Sass/SCSS？

需求概述 #

• 目标：在浏览器环境内直接编译SCSS字符串，无需调用服务端编译器。只需导入Sass库，将SCSS字符串传入函数即可获取编译后的CSS结果。
• 场景限制：仅用于测试场景，明确知晓此方案并非生产环境最佳实践，目的是避免为测试基础HTML文件启动服务器。
• 排除条件：拒绝依赖NodeJS或其他服务端软件的方案，也不接受需要处理源SCSS文件的二进制编译工具。

已尝试方案及问题 #

曾使用CDN提供的Sass.js库，但无法正常运行：调用compile方法后无任何输出，回调函数始终未触发，推测该方法可能要求传入文件名而非直接处理字符串。此外，该库的NPM版本依赖过多，难以在浏览器中直接使用。

测试代码如下：

<!-- 引入CDN上的Sass.js主库及对应的worker文件 -->
<script src="Sass.js主库地址"></script>
<script src="Sass.js worker文件地址"></script>
<script>
    const scss_to_compile = `
        .element1 {
            color: red;
        }`;

    Sass.compile(scss_to_compile, (result) => { console.log(result); });
    // 回调函数从未执行
</script>

可行但老旧的替代方案 #

目前找到一个可用方案：使用Medialize维护的Sass.JS分支，但该版本停更已久，自2019年起未再有更新。

内容的提问来源于stack exchange，提问作者Ryan Griggs