Angular添加CSS文件时出现MIME类型错误的解决求助

这个报错的核心原因是Angular CLI默认不会把src根目录下的自定义文件夹（比如你的css文件夹）当作静态资源目录，当你请求http://localhost:4200/css/layers.css时，服务器找不到这个文件，就返回了默认的index.html页面（MIME类型为text/html），浏览器自然会拒绝把它当作样式表加载。

下面给你两种可行的修复方案：

方案一：将静态资源移到默认的assets目录 #

Angular CLI默认会处理src/assets目录下的所有文件，把它们复制到构建后的输出目录里：

1. 把你的css文件夹整个移动到src/assets目录下，目录结构变成src/assets/css/layers.css
2. 然后修改引用方式：
   • 如果是在index.html里引用：

     <link rel="stylesheet" type="text/css" href="assets/css/layers.css">
     

   • 如果是在.angular-cli.json的styles数组里添加：

     "styles": [
       // 其他样式文件
       "assets/css/layers.css"
     ]
     

3. 重启ng serve，问题应该就能解决了。

方案二：配置Angular CLI识别自定义静态资源目录 #

如果你不想移动css文件夹，可以修改.angular-cli.json的配置，告诉CLI把css文件夹当作静态资源处理：

1. 打开.angular-cli.json，找到apps数组下的assets配置项，把css文件夹路径加进去：

   "apps": [
     {
       // 其他配置
       "assets": [
         "assets",
         "favicon.ico",
         "css" // 添加这一行
       ],
       // 其他配置
     }
   ]
   

2. 保持你的index.html引用或者styles数组里的路径不变（依然是css/layers.css）
3. 重启ng serve，此时访问http://localhost:4200/css/layers.css应该能直接看到css文件内容，浏览器也能正确加载样式了。

额外说明 #

你之前修改styles数组没解决问题，是因为当时css文件夹没有被CLI当作静态资源，构建时没有被复制到输出目录，导致CLI无法找到对应的文件，最终还是返回了html页面引发MIME错误。只要让CLI正确识别这个文件夹，不管是移到assets还是修改assets配置，都能解决问题。

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