Angular 12项目中css-loader导入样式返回字符串而非对象问题求助

问题原因 #

1. 单独使用css-loader的输出本身就是纯CSS字符串，只有搭配style-loader并配置injectType=lazyStyleTag参数后，导出结果才会是带use/unuse方法的对象，单独测试css-loader返回字符串属于正常现象。
2. Angular CLI 内置的webpack配置默认对所有.css后缀文件应用全局样式处理链，使用内联loader时如果没有添加!!前缀，Angular的默认处理逻辑会先执行，导致内联loader拿到的已经是处理过的字符串，最终返回结果不符合预期。

解决方案 #

不需要修改自定义webpack配置，按照以下步骤调整即可：

1. 调整导入语句写法 #

添加!!前缀禁用全局配置的loader，完整导入写法如下：

import test from "!!style-loader?injectType=lazyStyleTag!css-loader!./test.css"

2. 补充类型声明 #

原typings.d.ts里的*.css默认声明适配的是Angular普通样式导入场景，需要额外补充内联导入的类型声明：

// typings.d.ts 新增内容
declare module "!!style-loader?injectType=lazyStyleTag!css-loader!*.css" {
  const content: {
    use: () => void;
    unuse: () => void;
  };
  export default content;
}

3. 安装兼容版本的style-loader #

确保安装的style-loader版本支持webpack 5，直接执行以下命令安装即可：

npm i style-loader@3.3.3 -D

4. 适配Angular构建配置 #

如果生产构建时出现样式丢失问题，只需在angular.json对应项目的build.options中，将官方原生支持的extractCss参数设为false即可，不属于自定义webpack配置范围，符合Angular官方标准要求。

5. Storybook适配 #

如果仅在Storybook场景使用该功能，不需要修改组件库本身的构建配置，只需在.storybook/main.js中添加对应的loader规则即可，不会影响组件库的官方标准适配。

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