Angular 12.1.1编译报错：CSS loader未返回字符串及模块找不到求解

问题根因 #

两个报错均指向authentication.component.css文件的读取解析失败，结合你开启的forceConsistentCasingInFileNames校验规则，常见原因如下：

1. 路径/文件名大小写不匹配：Windows系统默认不区分文件名大小写，但Angular编译时会严格校验大小写，只要实际文件/文件夹名和组件中引用的路径大小写不一致，就会触发找不到模块的报错
2. 组件styleUrls路径配置错误：使用了绝对路径或者层级错误的相对路径引用css文件
3. Angular本地编译缓存损坏，导致loader解析异常

解决方案 #

• 校验文件存在性和大小写
  先确认C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/authentication/目录下确实存在authentication.component.css文件，同时逐段核对路径中所有文件夹、文件名的大小写，和组件内引用的路径完全一致。
• 修正组件样式引用路径
  打开authentication.component.ts，检查@Component装饰器的styleUrls配置，使用同目录相对路径写法即可，不要填写绝对路径：

  @Component({
    selector: 'app-authentication',
    templateUrl: './authentication.component.html',
    styleUrls: ['./authentication.component.css']
  })
  

• 清除缓存重新构建
  执行以下命令删除损坏的缓存和依赖，重新安装后启动服务即可：

  # Mac/Linux执行
  rm -rf .angular node_modules package-lock.json
  npm install
  ng serve
  

  # Windows PowerShell执行
  Remove-Item -Recurse -Force .angular, node_modules, package-lock.json
  npm install
  ng serve
  

• 校验文件后缀配置
  确认该文件后缀确实为css，如果你项目使用scss/less等预处理器，需要将文件后缀改为对应格式，同时同步修改styleUrls中的后缀名。

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