Gulp 浏览器同步不注入样式

Question

我正在尝试让浏览器同步以使用 gulp 注入样式。我已经从教程中复制粘贴了很多内容，但没有任何反应。 sass 被正确编译，但注入没有发生。知道我做错了什么，或者如何调试吗？

我也在使用 MAMP，如果它有任何不同的话。

我的 Gulp 文件：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create();



// Proxy Server
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        proxy: "local.website.com"
    });

    gulp.watch('../css/source/*.scss', ['sass']);
});


// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src('../css/source/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('../css/build'))
    .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

我的控制台中的响应：

[gulp] Starting 'default'...
[gulp] Finished 'default' after 4.61 μs
[BS] Proxying: http://local.website.com
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.8.12:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.8.12:3001
 -------------------------------------
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 114 ms
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 115 ms

如果重要，这是我的 package.json:

{
  "devDependencies": {
    "browser-sync": "^2.9.11",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4"
  }
}

Answer 1

你说你从教程中复制粘贴了，但你没有复制实际通知 browserSync 更改的部分：

gulp.watch('../css/source/*.scss').on('change', browserSync.reload);

Answer 2

我的问题是 Drupal - 它使用@import 而不是 link 来添加 CSS 文件。这个模块解决了！ https://www.drupal.org/project/link_css

Gulp 浏览器同步不注入样式

Gulp browser-sync not injecting styles

gulp

browser-sync