CSS/JS 未链接到 HTML 页面

Question

我使用以下教程创建了设置： https://coursetro.com/posts/design/72/Installing-Bootstrap-4-Tutorial

当我运行 gulp 文件 CSS/JS 未链接时，我在主体上应用了 bg 颜色，但未在此应用上。

我已经使用 npm 安装了引导程序 4，并添加了 gulpfile 来处理，以下代码用于 gulp 文件：

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

使用上面的代码，localhost 索引页面打开，但 css/js 未在页面上应用：

CSS 代码：body {背景色：#70501f; }

在控制台上显示错误，例如：

拒绝应用来自 'http://localhost:3000/src/css/bootstrap.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 (index):1 拒绝应用来自 'http://localhost:3000/src/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且严格的 MIME 检查已启用。

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>

我已经在这里上传了我的代码，请帮助我： https://github.com/pradeepmpatel/bootstrap4tuts

谢谢PP

Answer 1

我认为 MIME 类型错误可能是由于 css 路径不正确。 它试图提供错误而不是与 MIME 类型不匹配的 css 文件。 重新检查您的 CSS 和 JS 路径，它可能是./src 或./node_modules。