Angular 5.2.10中Sass无法生成CSS文件，遇MIME类型错误求助

问题1：CSS文件MIME类型为'text/html'的错误 #

这个错误本质是浏览器请求的CSS文件不存在，服务器返回了404的HTML页面，所以MIME类型不符合样式表要求。你可以按以下步骤排查修复：

• 先确认vendor/styles目录下的目标CSS文件确实存在，路径和index.html里的href完全匹配（注意Linux/macOS环境区分大小写）。
• 检查你的.angular-cli.json（Angular 5使用的是这个配置文件，而非后续版本的angular.json），确保vendor/styles被添加到assets数组中——只有配置在assets里的目录，Angular CLI才会在ng serve时复制到开发服务器的输出目录：

  "apps": [
    {
      "assets": [
        "assets",
        "favicon.ico",
        "vendor/styles" // 新增这一行，确保样式文件能被正常访问
      ],
      // 其他配置项...
    }
  ]
  

• 把index.html里的样式链接改成相对路径开头（加./），避免路径解析异常：

  <link rel="stylesheet" href="./vendor/styles/bootstrap.bundle.css" class="theme-settings-bootstrap-css">
  

问题2：Sass @import .css文件的警告 #

这个是因为LibSass（node-sass的底层依赖）从4.x版本开始逐步移除了直接@import .css文件的特性，属于破坏性变更。针对你的老项目，最省心的修复方式有两种：

方式1：用Angular CLI的styles数组管理全局样式

把所有需要全局引入的CSS文件添加到.angular-cli.json的styles数组里，让CLI帮你处理打包，这样就不用在Sass文件里手动@import了：

"apps": [
  {
    "styles": [
      "vendor/styles/bootstrap.bundle.css",
      "vendor/styles/appwork.bundle.css",
      "vendor/styles/theme-corporate.bundle.css",
      "vendor/styles/colors.bundle.css",
      "vendor/styles/uikit.bundle.css",
      "src/styles.scss" // 项目主样式文件
    ],
    // 其他配置项...
  }
]

添加完成后可以删掉index.html里对应的link标签，避免重复引入。

方式2：修改CSS文件后缀为.scss

如果你的项目是在某个.scss文件里@import这些.css文件（比如@import 'vendor/styles/bootstrap.bundle.css';），可以直接把目标CSS文件的后缀改成.scss，然后修改导入语句为@import 'vendor/styles/bootstrap.bundle.scss';——原生CSS语法在Sass文件里完全兼容，这样就能绕过LibSass的限制。

最后提醒 #

修改配置文件后，记得重启ng serve，因为Angular CLI不会自动监听配置文件的变更。

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