当前位置: 首页 > 知识库问答 >
问题:

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

濮阳耀
2023-03-14

我有一个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文件,然后整个样式是否正确?知道我做错了什么吗?


共有1个答案

宗政松
2023-03-14

你需要使用这个:

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

 类似资料:
  • 我正在开发基本的Spring Boot应用程序,它启用了Spring Security性 当我尝试在my thymeleaf HTML中使用CSS时,出现以下错误: 拒绝应用http://localhost:9999/login的样式,因为它的MIME类型(text/html)不是受支持的样式表MIME类型,并且启用了严格的MIME检查。

  • 嗨,我在运行gulp watch时遇到这个错误。我在拉拉维尔项目中使用vueify。为什么会发生这种情况。这几天工作得很好,今天收到了。 这是我的gulpfile.js

  • 问题内容: 我正在使用一个网站进行编译和浏览器同步,以使浏览器与我的更改保持同步。 gulp任务可以正确编译所有内容,但是在网站上,我看不到任何样式,并且控制台显示以下错误消息: 拒绝从’ http:// localhost:3000/assets/styles/custom-style.css ‘ 应用样式,因为它的MIME类型(’text / html’)不是受支持的样式表MIME类型,并且启

  • 我在一个应用程序,我试图改变主题(动态)。 正确编译所有内容,但在中,我收到了此错误消息。 拒绝应用http://localhost:4200/vendor/theme-light.css的样式,因为它的MIME类型(text/html)不是受支持的样式表MIME类型,并且启用了严格的MIME检查。 我的文件结构是这样的,路径正确 我的主题更改代码如下所示 现在,我真的不明白为什么会这样。我是不是

  • 我是个新手。目前我正在学习6个特征。当我试图处理错误时,会出现如下问题:, 未找到模块:错误:无法解析“D:\WORKSPACE\Angular5\binding\src\app”中的“rxjs/add/observable/throw” 找不到模块:错误:无法解决'D:\WORKSPACE\Angular5\绑定\src\app'中的'rxjs/add/操作员/捕获' src/app/emplo

  • 这是我的货堆 快车 我犯了一个错误 拒绝应用来自http://localhost:3000/css/style.css'因为它的MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查。 我的头标签位于一个单独的partials文件夹中: -views --partials --header。ejs ——索引。ejs 我的CSS也在另一个文件夹 -publ