Question

我正在使用试图建立的Bootstrap在网站上使用gulp。我能够在node.js命令提示符下成功运行gulp：

gulp running from command line

但是没有样式表应用于加载的网页：

screenshot of what loads errors in console

我已经检查了以下帖子：Stylesheet not loaded because of MIME-type，但在其中找不到解决我问题的答案。

这是我的代码结构：

code structure

这是我的代码：

index.html


        <!DOCTYPE html>
        <html class="no-js" lang="en">
            <head>
                <title>Bootstrap 4 Layout</title>
                <meta http-equiv="x-ua-compatible" content="ie=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
                <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
                <link rel="stylesheet" href="css/bootstrap.css">
                <link rel="stylesheet" href="css/styles.css">
            </head>

            <body>
                <script src="/js/jquery.min.js"></script>
                <script src="/js/popper.min.js"></script>
                <script src="/js/bootstrap.min.js"></script>
            </body>
        </html>

gulpfile.js


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

        // Compile sass into CSS & auto-inject into browsers
        gulp.task('sass', gulp.series(function() {
        return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
        }));

        // Move the javascript files into our /src/js folder
        gulp.task('js', gulp.series(function() {
        return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
        }));

        // Static Server + watching scss/html files
        gulp.task('serve', gulp.series('sass', function() {

        browserSync.init({
        server: {
          baseDir: "./"
          },
          port: 8080,
          open: true,
          notify: false
        });

        gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
        gulp.watch("src/*.html").on('change', browserSync.reload);
        }));

        gulp.task('default', gulp.series(['js','serve']))

运行版本：

npm：6.9.0

    "devDependencies": {
        "browser-sync": "^2.26.7",
        "gulp": "^4.0.2",
        "gulp-cli": "^2.2.0",
        "gulp-sass": "^3.1.0"
      },
      "dependencies": {
        "bootstrap": "^4.3.1",
        "jquery": "^3.4.1",
        "popper.js": "^1.15.0"
      }

我觉得问题可能出在下面底部的 gulpfile.js 中：

    browserSync.init({
    server: {
      baseDir: "./"
      },
      port: 8080,
      open: true,
      notify: false
    });

此外，我正在尝试遵循https://www.youtube.com/watch?v=hnCmSXCZEpU&t=766s来启动引导程序，并且我知道本教程中的很多人在这部分上都遇到了麻烦。也许这篇文章也可以帮助他们。.

编辑1

我尝试使用大口吃服务，没有任何变化。这是编辑后的gulpfile.js的链接

Edited gulpfile.js

这是npmjs.com关于gulp服务的说法：

enter image description here

无法加载样式表，“不支持MIME类型”

0 个答案: