Can't load stylesheet, "MIME-type not supported"

Question

I'm using gulp for a website using Bootstrap that I'm trying to set up. I'm able to successfully run gulp from the node.js command prompt:

gulp running from command line

But no stylesheets are applied to the webpage that loads:

screenshot of what loads errors in console

I've already checked this post: Stylesheet not loaded because of MIME-type and can't find the answer to my problem in it.

This is my code structure:

code structure

This is my code:

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']))

running versions:

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"
      }

I have a feeling that the problem might be in gulpfile.js at the bottom here:

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

Also, I'm trying to follow https://www.youtube.com/watch?v=hnCmSXCZEpU&t=766s for getting bootstrap started and I know that a lot of people from the tutorial have had trouble with this part. Maybe this post can help them too..

EDIT 1

I tried using gulp serve, nothing changed. Here's a link to the edited gulpfile.js

Edited gulpfile.js

This is what npmjs.com says about gulp serve:

enter image description here

If `http://localhost:8080/js/jquery.min.js` is working, then you can solve with same method — MERN, Aug 01 '19 at 18:07
However, I do now have almost no errors. The ones that remain are: "Refused to load the font '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. "Refused to load the image style.css:1" and "Failed to load resource: the server responded with a status of 404 (Not Found) style.css:1" — Justin Arenson, Aug 01 '19 at 18:07
King Stone, that doesn't work either. I get an error saying CANNOT GET /js/jquery.min.js on the screen and in the console it says "Refused to load the font '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback." and " Refused to load the image [...] because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. jquery.min.js:1" — Justin Arenson, Aug 01 '19 at 18:09
Yes, I cannot find **serve 'js' and 'css' directory**. https://stackoverflow.com/a/49735735/11343720 — MERN, Aug 01 '19 at 18:10
I tried adding the / before the css files and also tried moving them to the assets folder. No improvements — Justin Arenson, Aug 01 '19 at 18:17
Updated gulp serve, tried running it, nothing happened. then tried adding in what can be used from the usage section, nothing happened. I'll update with a link to my new code in gulpfile.js — Justin Arenson, Aug 01 '19 at 18:21

Can't load stylesheet, "MIME-type not supported"

0 Answers0