Firefox中import断言相关问题及特性检测兼容方案咨询

针对你遇到的Firefox中CSS模块导入的问题，这里提供特性检测+降级处理的兼容方案：

1. 特性检测方法 #

通过异步函数测试当前环境是否支持带断言的CSS模块动态导入：

async function supportsCSSModuleImports() {
  try {
    // 创建临时CSS Blob URL用于测试
    const testBlob = new Blob([''], { type: 'text/css' });
    const testUrl = URL.createObjectURL(testBlob);
    // 尝试带assert的动态导入
    await import(testUrl, { assert: { type: 'css' } });
    URL.revokeObjectURL(testUrl);
    return true;
  } catch (e) {
    return false;
  }
}

2. 完整兼容加载函数 #

结合特性检测和降级逻辑，封装通用的CSS加载函数，自动适配环境支持情况：

async function loadCSS(url) {
  const isSupported = await supportsCSSModuleImports();
  
  if (isSupported) {
    // 支持CSS模块导入时，使用动态导入并应用样式
    const cssModule = await import(url, { assert: { type: 'css' } });
    document.adoptedStyleSheets.push(cssModule.default);
    return cssModule.default;
  } else {
    // 不支持时，降级为传统link标签加载
    return new Promise((resolve, reject) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      link.onload = () => resolve(link.sheet);
      link.onerror = reject;
      document.head.appendChild(link);
    });
  }
}

使用示例 #

直接调用封装函数加载目标CSS文件：

// 加载ScrollGrid.css
loadCSS('/Vanilla/ScrollGrid.css')
  .then(sheet => console.log('样式加载完成', sheet))
  .catch(err => console.error('样式加载失败', err));

错误原因说明 #

• 静态import ... assert {type: 'css'}语法目前Firefox不支持，会抛出不兼容错误；
• 移除断言后出现MIME类型错误，是因为浏览器默认不会将text/css类型文件当作模块处理；
• 动态导入的断言语法若报错，多为旧版本Firefox的语法解析问题，降级方案可覆盖这类情况。

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