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。