浏览器环境下如何用Dart Sass的compileString()导入文件？

浏览器环境下Dart Sass无法直接访问本地文件系统，所以使用compileString()导入外部文件时必须自定义importer来处理文件加载逻辑。下面是针对你导入Bulma的具体解决方案：

核心思路 #

自定义importer本质是一个函数，它接收导入的URL，负责获取对应文件的内容并返回给Sass编译器。在浏览器中，你可以通过fetch请求静态资源（比如部署后的Bulma文件，或者CDN资源）来获取内容。

完整代码示例 #

// 确保已正确引入浏览器版Dart Sass
const sass = window.sass;

// 自定义importer函数
const customImporter = async (url, options) => {
  // 匹配Bulma的导入路径
  if (url.includes('../node_modules/bulma/bulma.sass')) {
    // 浏览器无法直接读取本地node_modules，使用CDN或项目静态资源路径
    const response = await fetch('https://cdn.jsdelivr.net/npm/bulma@0.9.4/bulma.sass');
    if (!response.ok) {
      throw new Error(`加载Bulma失败: ${response.statusText}`);
    }
    const contents = await response.text();
    return {
      contents,
      syntax: 'indented' // Bulma采用Sass缩进语法，SCSS文件则指定为'scss'
    };
  }
  
  // 未匹配到的导入，返回null让Sass尝试其他逻辑
  return null;
};

// 执行编译
const compileSass = async () => {
  try {
    const result = await sass.compileString(`h1 {
      font-size: 40px;
      code {
        font-family: Roboto Mono;
      }
    }

    @charset "utf-8";
    @import "../node_modules/bulma/bulma.sass";`, {
      importers: [customImporter] // 传入自定义importer数组
    });
    console.log(result.css);
  } catch (error) {
    console.error('编译错误:', error);
  }
};

compileSass();

关键点说明 #

1. importer函数规则：

   • 必须返回包含contents（文件内容字符串）和syntax（可选，指定语法类型：'scss'或'indented'）的对象，或返回null表示跳过当前importer。
   • 涉及网络请求时需用异步函数（async/await）。

2. 路径适配：

   • 本地../node_modules路径在浏览器中不可用，需替换为可HTTP访问的地址：可以是项目部署后的静态资源路径，也可以是公开CDN链接。

3. 错误处理：

   • 必须捕获fetch请求失败的情况，避免编译过程出现未处理异常。

内容的提问来源于stack exchange，提问作者Mila Kings