时间戳

首页 > 解决方案 > 由于 mime 类型的文本/html，样式在 gulp 监视任务后不起作用

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

问题描述

我有一个gulp watch task，它将所有scss文件编译并连接到一个css文件中。在我的索引中，我link的css文件是这样的：

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

这是我的gulp watch task：

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

开始gulp watch任务后，我的浏览器打开了我的网站，但样式错误。我收到了这个错误：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'));
 });

我不知道为什么会发生这种情况，我正在使用我在此解决方案中描述的type="text/css"属性： “未加载样式表，因为它的 MIME 类型，“text/html”不是“text/css”link

开始gulp watch任务后，我必须更改我的一个scss文件，而不是整个样式是否正确？有什么想法我做错了吗？

标签： htmlcssgulp

解决方案

你需要使用这个：

<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中 - 这取决于您的项目。

推荐阅读