由于mime类型的文本/html[重复]，样式在吞咽观看任务后不工作

Question

我有一个gulpwatch任务，它将所有scss文件编译成一个css文件。在我的索引中，我把link链接到css文件中，如下所示：

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

这是我的gulp手表任务：

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

在我启动大口吃watch任务后，我的浏览器打开了我的网站，但样式是错误的。我得到了这个错误：拒绝应用http://localhost:3000/css/styles.css/的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

这是整个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'));
 });

我不知道为什么会发生这种情况，我在我的链接中使用了type="text/css"属性，就像这个解决方案中描述的那样：样式表没有加载，因为它的MIME类型，"text/html"不是"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”——但是这种解决方案的满意度较低

更新你的吞咽文件，你有一行

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

这意味着处理后的文件存储在中/app/css目录，所以你的网站管理员可能看不到它（可能这些文件必须存储在不同的目录中，比如/public/css——这取决于你的项目。