CSS/JS not linking to HTML page

Question

I have created setup using below tutorial: https://coursetro.com/posts/design/72/Installing-Bootstrap-4-Tutorial

When I run gulp file CSS/JS are not linked, I have applied bg color on body but not applying on this.

I have installed bootstrap 4 using npm and add gulpfile to process, below code is for gulp file:

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', 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', 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: "./src"
});

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

gulp.task('watch', function() {
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
});

gulp.task("default", gulp.series(gulp.parallel("js", "serve", 'sass')));

Using above code, localhost index page opened but css/js not applying on page:

CSS code: body {background-color: #70501f; }

Showing error on console like:

Refused to apply style from 'http://localhost:3000/src/css/bootstrap.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. (index):1 Refused to apply style from 'http://localhost:3000/src/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

CSS:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link type="text/css" href="/src/css/bootstrap.css" rel="stylesheet">
<link type="text/css" href="/src/css/style.css" rel="stylesheet">

JS:

<script type="text/javascript" src="/src/js/jquery.min.js"></script>
<script type="text/javascript" src="/src/js/bootstrap.js"></script>
<script type="text/javascript" src="/src/js/popper.min.js"></script>

I have uploaded my code at here, please help me: https://github.com/pradeepmpatel/bootstrap4tuts

Thanks PP

Answer 1

I think the MIME Type error could be due to the css path not being correct. It's trying to serve up an error instead of the css file which is not matching the MIME type. recheck your CSS & JS paths, it could be./src or./node_modules.