执行gulp watch任务后样式失效，原因是MIME类型为text/html

你遇到的这个问题本质是浏览器请求CSS文件时，服务器返回的是text/html类型的内容而非text/css——这几乎可以肯定是请求的CSS文件不存在，服务器返回了HTML格式的404错误页面导致的。下面是一步步的排查和解决方法：

1. 确认Sass任务的输出路径与页面引入路径匹配 #

首先检查你的sass任务代码，确保编译后的CSS文件输出到了页面引入的./css/styles.css对应的实际目录。你的页面在app/index.html，那么./css/styles.css对应的物理路径应该是app/css/styles.css。

你的sass任务需要类似这样的配置：

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError)) // 编译SCSS并捕获错误
    .pipe(gulp.dest('app/css')) // 关键：输出到app/css目录，和页面引入路径对应
    .pipe(browserSync.reload({ stream: true })); // 实时注入更新后的样式
});

如果gulp.dest设置的是dist/css或其他路径，页面引入的./css/styles.css自然找不到文件，服务器就会返回HTML错误页，导致MIME类型异常。

2. 检查BrowserSync的根目录配置 #

BrowserSync的baseDir决定了服务器的根路径，配置错误会直接导致路径解析混乱。你的HTML文件在app/*.html，所以BrowserSync的根目录必须设为app：

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app' // 必须指向HTML文件所在的目录
    }
  });
});

如果baseDir设成了dist或其他目录，浏览器请求./css/styles.css时会去错误的目录查找，同样会触发404错误。

3. 验证文件存在性与请求状态 #

打开浏览器开发者工具（F12），切换到Network标签，刷新页面后找到styles.css的请求：

• 如果状态码是404，说明文件确实不存在，回到前两步检查路径配置。
• 点击该请求查看Response标签，如果返回的是HTML内容（比如404提示页面），就完全对应了你遇到的MIME类型问题。

4. 额外排查点 #

• 检查SCSS编译是否报错：如果Sass编译失败，可能不会生成CSS文件，也会导致404。可以单独运行gulp sass，看控制台有没有错误提示。
• 强制刷新浏览器缓存：有时候旧的缓存响应会干扰结果，按Ctrl+Shift+R强制刷新页面即可。

按照上面的步骤排查，应该能快速定位并解决问题。

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