Azure Angular Web应用访问*.scss文件出现404(未找到)问题求助

• 检查Angular构建配置（angular.json）
  Angular默认不会将SCSS这类预编译源文件自动打包到生产环境的assets目录中，需要手动配置让构建工具复制这些文件。打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> assets数组，添加SCSS文件或所在目录的匹配规则：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/assets/**/*.scss" // 新增此行，匹配assets下所有SCSS文件
  ]
  

  配置完成后重新执行ng build，检查dist目录下是否已包含目标SCSS文件。

• 核对访问路径的准确性
  确认访问URL的路径与实际文件路径完全一致，注意区分大小写（尤其是部署在Linux服务器时）。比如文件实际路径是assets/styles/print.scss，访问URL必须严格对应，不能写成assets/style/print.scss或Assets/Styles/print.scss。

• 清理构建缓存
  旧的构建缓存可能导致配置修改不生效，执行以下操作清理后重新构建：

  ng clean # Angular 12+版本支持
  # 或手动删除项目根目录下的dist文件夹
  rm -rf dist
  ng build --prod
  

• 检查服务器MIME类型配置
  如果部署到Nginx、Apache等服务器，需确保服务器支持SCSS文件的MIME类型，避免因类型识别问题返回404。以Nginx为例，在配置文件中添加：

  types {
    text/x-scss scss;
  }
  

  配置完成后重启服务器生效。

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