TypeScript导入SASS包遇异常：compileString导出不存在？

问题场景 #

尝试使用SASS包将SASS字符串转译为CSS字符串，执行以下代码时出现导入错误：

import { compileString } from 'sass';

const scss = `
  div {
    .row {
      display: flex;
    }
  }
`;

const css = compileString(s); // 注意：此处变量名错误，应为scss而非s

console.log(css);

报错信息：

Uncaught SyntaxError: The requested module './../../../node_modules/sass/sass.default.js' does not provide an export named 'compileString';

当前tsconfig.json配置：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "baseUrl": "./src",
    "lib": [
      "dom",
      "es2017"
    ],
    "esModuleInterop": true,
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowJs": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "src/lib/payments.js"
  ]
}

原因及解决方案 #

1. SASS版本过低 #

compileString是Dart Sass 1.33.0版本才新增的API，若安装的SASS版本低于该版本，将无法找到此导出项：

• 检查package.json中sass的版本号，查看dependencies或devDependencies字段
• 升级SASS：执行npm install sass@latest或yarn add sass@latest

2. 导入方式兼容性问题 #

部分场景下，即使版本达标，ES模块导出的兼容性可能导致解构导入失败，可尝试默认导入后调用方法：

import sass from 'sass';

const scss = `
  div {
    .row {
      display: flex;
    }
  }
`;

const result = sass.compileString(scss);
console.log(result.css); // compileString返回对象包含css属性，需提取后打印

3. 打包工具模块解析配置冲突 #

若使用webpack、Vite等打包工具，其模块解析配置可能与tsconfig不匹配，导致无法正确识别SASS的ES模块导出：

• 检查打包工具的模块配置，确保开启ES模块支持
• 针对Vite，检查vite.config.js中的resolve配置；针对webpack，确认module.rules中js/ts文件的处理规则符合ES模块要求

额外注意 #

你的代码存在变量名错误：compileString(s)中的s未定义，需改为compileString(scss)，否则即使解决导入问题，代码仍会因变量未定义报错。

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