I followed a tutorial to set up my project which can be found here:
However, when I run the gulp file, the CSS/JS files are not being linked. I have applied a background color to the body but it is not showing up.
I installed Bootstrap 4 using npm and added a gulpfile for processing. Here is the code for the 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')));
Even though the localhost index page opens, the CSS/JS is not being applied:
CSS code: body {background-color: #70501f; }
An error is displayed in the console:
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>
If you can help, please check out my code on GitHub: https://github.com/pradeepmpatel/bootstrap4tuts
Thank you, PP