Angular应用中导入.scss至TypeScript文件时构建失败问题

算力阿峰

2026-7-31

问题描述

尝试将.scss文件导入.ts文件时，应用构建失败
已创建_export.scss和对应的_export.scss.d.ts类型文件
构建报错提示：./apps/appe/src/_export.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
已使用resolve-url-loader、sass-loader处理文件，但系统提示仍需额外加载器
_export.scss代码：

:export {
  white: #fff;
}

在appcomponent.ts中导入该文件并尝试使用

解决办法

检查Webpack的loader配置顺序与参数

loader是从右往左执行的，配置时需将style-loader、css-loader放在sass-loader前面，正确顺序应为['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
同时要给css-loader开启modules选项，否则无法识别scss中的:export导出逻辑，示例配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
              },
            },
          },
          'resolve-url-loader',
          'sass-loader'
        ],
        exclude: /node_modules/
      }
    ]
  }
};

修正类型定义文件的写法
- _export.scss.d.ts需正确声明导出变量，才能被TS识别，两种写法任选其一：
- 通用型（匹配所有scss文件）：
```
declare module '*.scss' {
  const styles: {
    readonly white: string;
  };
  export default styles;
}
```
- 针对单个文件的声明：
```
declare module './_export.scss' {
  export const white: string;
}
```
确认TS文件中的导入方式正确
- 若使用默认导出的类型定义，导入写法：
```
import styles from './_export.scss';
// 使用示例：console.log(styles.white)
```
- 若使用命名导出的类型定义，导入写法：
```
import { white } from './_export.scss';
```