使用SCSS :export导致Webpack报错：Unexpected token及模块查找失败

问题描述 #

想要在Angular应用的TypeScript模块中复用SCSS定义的变量，采用SCSS的:export方式实现，但添加后出现两类错误：

1. Webpack模块解析错误：

./src/styles/_export.scss:16:0 - Error: Module parse failed: Unexpected token (16:0)
File was processed with these loaders:
 * ./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js
 * ./node_modules/.pnpm/sass-loader@13.0.2_sass@1.54.4+webpack@5.74.0/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> :export {
|   dialogWidth: 600px;
|   sidenavWidthExpanded: 280px;

2. TypeScript模块查找错误：

Error: src/app/modules/help/services/help.service.ts:12:29 - error TS2307: Cannot find module '@styles/_export.scss' or its corresponding type declarations.

另外注意到:export是ICSS（Interoperable CSS）规范特性而非原生SASS特性，且pnpm-lock.yaml中存在3个不同版本的css-loader，无法确定构建时实际使用的版本。

解决步骤 #

1. 统一css-loader版本并配置ICSS解析 #

:export需要css-loader处理ICSS导出逻辑，当前错误的核心原因是：

• Angular默认样式处理流程未针对单独导入的SCSS文件启用ICSS解析
• 多版本css-loader存在冲突，需统一使用与当前Webpack（5.74.0）匹配的最新稳定版（6.7.1）

操作方式：

• 在package.json中明确指定css-loader@6.7.1，执行pnpm install让包管理器统一依赖版本
• 通过@angular-builders/custom-webpack自定义Webpack配置，为导出用的SCSS文件开启ICSS模式：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /_export\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'icss',
              },
            },
          },
          'sass-loader',
        ],
        include: path.resolve(__dirname, 'src/styles'),
      },
    ],
  },
};

2. 添加TypeScript类型声明 #

TS报错是因为缺少SCSS模块的类型定义，在src目录下创建typings.d.ts文件：

declare module '*.scss' {
  const styles: Record<string, string>;
  export default styles;
}

若使用了@styles路径别名，需确保tsconfig.json的paths配置正确：

{
  "compilerOptions": {
    "paths": {
      "@styles/*": ["src/styles/*"]
    }
  }
}

3. 验证SCSS导出格式 #

确保_export.scss的:export语法正确，变量名可直接使用：

:export {
  dialogWidth: 600px;
  sidenavWidthExpanded: 280px;
}

在TS中导入使用：

import styles from '@styles/_export.scss';

// 使用导出的变量
const dialogWidth = styles.dialogWidth;

内容的提问来源于stack exchange，提问作者Peter T.