使用Gulp.js与BrowserSync时样式表因MIME类型错误无法加载

这个问题我调试Gulp+Browsersync时也碰到过，核心矛盾是：浏览器请求custom-style.css时，服务器返回的不是CSS文件，而是HTML文档（大概率是404错误页），所以MIME类型不匹配导致样式加载失败。结合你的场景，以下是最可能的排查方向：

1. Gulp编译任务未正确输出CSS到目标目录 #

你提到样式是Bootstrap和Font Awesome的合并版本，但要确认Gulp任务是否真的把最终的custom-style.css输出到了项目根目录的assets/styles/下。比如你的Gulp任务可能把编译产物放到了dist/这类子目录中，但Browsersync的服务根目录却指向了项目根，导致请求路径找不到文件。

举个常见的错误配置例子：

gulp.task('styles', function() {
  return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.css', 'node_modules/font-awesome/css/font-awesome.css'])
    .pipe(concat('custom-style.css'))
    .pipe(gulp.dest('./dist/assets/styles/')); // 输出到dist子目录，但Browsersync根目录是项目根
});

排查动作：手动打开项目根目录的assets/styles/文件夹，确认custom-style.css是否真实存在，且文件内容是合并后的样式代码。

2. Browsersync的服务根目录配置错误 #

如果Browsersync的baseDir设置不对，会导致它从错误的目录查找静态资源。比如你把根目录设成了./dist，但你的index.html和assets目录都在项目根目录，那Browsersync会去dist/assets/styles/找文件，自然找不到。

错误配置示例：

browserSync.init({
  server: {
    baseDir: './dist' // 根目录指向dist，但dist下没有assets文件夹
  }
});

排查动作：检查你的Gulp+Browsersync配置，把baseDir改成项目根目录./，或者确保dist目录下包含完整的index.html和assets结构。

3. HTML路径的相对关系错位 #

虽然你说路径写法无误，但如果index.html被Gulp处理后放到了其他目录（比如dist/），相对路径就会失效。比如index.html在dist/下，而assets在项目根，那href="assets/styles/custom-style.css"会被解析成dist/assets/styles/custom-style.css，如果该路径下没有文件，就会返回404的HTML页面。

排查动作：在浏览器中右键查看页面源代码，点击样式文件的链接，看跳转后的页面是不是404错误页——如果是，就说明路径确实存在问题。

4. 缓存或Browsersync重载问题 #

有时候浏览器会缓存旧的404响应，或者Browsersync没有同步最新的编译产物。可以试试：

• 强制刷新浏览器（Ctrl+Shift+R），清除缓存后重新加载
• 停止Gulp任务，重新执行编译命令，确保所有任务完成后再启动Browsersync

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