Flask Browsersync服务器-需要到html和css的不同路径才能重新加载

问题是我的index.html不会从姐妹文件夹加载css文件。我尝试了多种Browsersync选项，但都没有成功

直到我第二天想弄明白。我在Python的烧瓶框架中工作，它像Laravel一样工作。我的任务管理器是GULP，前端框架是基础6。我是个新来的酒鬼。几年前，我曾在Laravel中使用Grunt和Livereload，当时SCS和浏览器重新加载都可以正常工作。但记忆会慢慢消失

我的文件结构应该是典型的Flask，这里只有相关的文件夹：

-root
    -app
        -static
             -css
             -js
        -templates  (html files)
    -foundation  (scss files and framework)

Browsersync的设计似乎是为了在html文件下使用css。我用/root和/app文件夹中的index.html测试了这一点，它可以正常工作。但是，我需要/想要/模板中的html

在/app/templates/index.html中：

<link rel="stylesheet" href="../static/css/app.css">

我已经考虑过他们的代理选项，但到目前为止还没有找到解决方案。我还没有在网上找到很多安装示例，没有一个是有用的

现在我只是在用基础6做应用程序的HTML页面的桌面布局，还没有设置一个DEV服务器，只是我的MBP上的一个文件夹。p>

---

有什么想法吗？请：-）

您可以提供多个基本目录，从中提供静态文件

server: {
    baseDir: ["app/templates", "static"]
}

默认情况下，这将服务器

app/templates/index.html

，然后在html中使用

<link rel="stylesheet" href="/css/app.css">

<>代码> 这是我在站点根目录中的最后一个工作GulpFiel.js，它是用烧瓶或其他大多数应用框架加上基础6来工作的。希望这个例子能为人们节省一天或更多的时间。稍后我将添加js文件

var gulp        = require('gulp');
var $    = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var src = {
    scss: 'foundation/scss/*.scss',
    css:  'app/static/css/app.css',
    allscss:  'foundation/scss/**/*.scss',
    cssdest: 'app/static/css',
    html: 'app/templates/*.html'
};

var sassPaths = [
  'foundation/bower_components/foundation-sites/scss'
  //'foundation/bower_components/motion-ui/src'
];

gulp.task('serve', ['sass'], function() {
    browserSync({
        open: false,
        server: {
          baseDir: ["app/templates", "app/static"]
        }
    });
    gulp.watch([src.scss, src.allscss], ['sass'])
    gulp.watch(src.html).on('change', reload);
    gulp.watch(src.css).on('change', reload);
});

gulp.task('sass', function() {
   return gulp.src(src.scss)
     .pipe($.sass({
       includePaths: sassPaths
     })
       .on('error', $.sass.logError))
    .pipe($.autoprefixer({
       browsers: ['last 2 versions', 'ie >= 9']
    }))
     .pipe(gulp.dest(src.cssdest))
});


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

太好了，它起作用了！很好，它接受一个数组。我不得不在静态路径前面添加app/但是有个小问题。谢谢经过无数次的搜索，这也解决了我的问题。但是，除了在前面添加app/之外，我还必须将href改为simply style.css
var gulp        = require('gulp');
var $    = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var src = {
    scss: 'foundation/scss/*.scss',
    css:  'app/static/css/app.css',
    allscss:  'foundation/scss/**/*.scss',
    cssdest: 'app/static/css',
    html: 'app/templates/*.html'
};

var sassPaths = [
  'foundation/bower_components/foundation-sites/scss'
  //'foundation/bower_components/motion-ui/src'
];

gulp.task('serve', ['sass'], function() {
    browserSync({
        open: false,
        server: {
          baseDir: ["app/templates", "app/static"]
        }
    });
    gulp.watch([src.scss, src.allscss], ['sass'])
    gulp.watch(src.html).on('change', reload);
    gulp.watch(src.css).on('change', reload);
});

gulp.task('sass', function() {
   return gulp.src(src.scss)
     .pipe($.sass({
       includePaths: sassPaths
     })
       .on('error', $.sass.logError))
    .pipe($.autoprefixer({
       browsers: ['last 2 versions', 'ie >= 9']
    }))
     .pipe(gulp.dest(src.cssdest))
});


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