由于 mime 类型的文本/html，样式在 gulp 监视任务后不起作用 [重复]

Question

我有一个gulpwatchtask，它将所有scss 文件编译并合并到一个css 文件中。在我的索引中，我 link css 文件是这样的：

<link rel="stylesheet" type="text/css" href="./css/styles.css">

这是我的gulpwatchtask：

gulp.task('watch', ['browserSync', 'sass'], function () {
    gulp.watch('app/scss/**/*.scss', ['sass']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

这是我的gulp 文件和sass 任务：

gulp.task('sass', function () {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
        .pipe(sass())
        .pipe(concat('styles.css'))
        .pipe(gulp.dest('app/css/'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

在我启动gulpwatch 任务后，我的浏览器打开了我的网站，但样式错误。我收到了这个错误：Refused to apply style from 'http://localhost:3000/css/styles.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

这是整个 gulpfile.js：

//My Gulpfile
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var dev = require('gulp-dev');


gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in 
app/scss
    .pipe(sass())
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('browserSync', function () {
browserSync.init({
    server: {
        baseDir: 'app'
    },
   })
 });

 gulp.task('dev', function() {
  gulp.src('index.html')
    .pipe(dev(true))
    .pipe(gulp.dest('index.html'));
 });

我不知道为什么会这样，我在我的link 中使用了type="text/css" 属性，就像在这个解决方案中描述的那样："The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

启动gulpwatch 任务后，我必须更改我的scss 文件之一，然后整个样式是否正确？任何想法我做错了什么？

Answer 1

你需要使用这个：

<link rel="stylesheet" type="text/css" href="./app/css/styles.css">

我将href="./css/styles.css" 更改为href="./app/css/styles.css"。您也可以将type="text/css" 更改为type="text/html" - 但是这个解决方案不太令人满意

更新 在您的 gulp 文件中，您有一行

.pipe(gulp.dest('app/css/'))

这意味着处理后的文件存储在./app/css 目录中，因此您的网络服务器可能看不到它（也许这些文件必须存储在不同的目录中，例如./public/css - 这取决于您的项目。