Question

我刚开始尝试在开发过程中使用gulp builder并偶然发现了一些问题，其中大部分都是我决定的，但有一个我无法解决并请求大师的帮助。

事实是，当我尝试连接滑块样式时，我收到错误（尝试了两个不同的滑块）：

Refused to apply style from 'http://localhost:3000/node_modules/slick-carousel/slick/slick.scss/slick.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
...

我的CSS：

@import "custom_variables";
@import "../../../node_modules/bootstrap/scss/bootstrap-reboot";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../../node_modules/bootstrap/scss/grid";
and other ...

@import "../fonts/css/font-awesome.min.css";
@import "../../../node_modules/slick-carousel/slick/slick";
@import "../../../node_modules/slick-carousel/slick/slick-theme";

@import "blocks/preloader";
@import "blocks/sidebar";

我的gulp文件（可能有关于它的东西）：

"use strict";

var gulp = require("gulp"),
    autoprefixer = require("gulp-autoprefixer"),
    cssbeautify = require("gulp-cssbeautify"),
    removeComments = require('gulp-strip-css-comments'),
    rename = require("gulp-rename"),
    sass = require("gulp-sass"),
    cssnano = require("gulp-cssnano"),
    rigger = require("gulp-rigger"),
    uglify = require("gulp-uglify"),
    watch = require("gulp-watch"),
    plumber = require("gulp-plumber"),
    imagemin = require("gulp-imagemin"),
    run = require("run-sequence"),
    rimraf = require("rimraf"),
    webserver = require("browser-sync");


var path = {
    build: {
        html: "build/",
        js: "build/assets/js/",
        css: "build/assets/css/",
        img: "build/assets/i/",
        fonts: "build/assets/fonts/"
    },
    src: {
        html: "src/*.{htm,html}",
        js: "src/assets/js/*.js",
        css: "src/assets/sass/style.scss",
        img: "src/assets/i/**/*.*",
        fonts: "src/assets/fonts/**/*.*"
    },
    watch: {
        html: "src/**/*.{htm,html}",
        js: "src/assets/js/**/*.js",
        css: "src/assets/sass/**/*.scss",
        img: "src/assets/i/**/*.*",
        fonts: "src/assets/fonts/**/*.*"
    },
    clean: "./build"
};


var config = {
   server: "build/",
   notify: false,
   open: true,
   ui: false
};


gulp.task("webserver", function () {
    webserver(config);
});


gulp.task("html:build", function () {
    return gulp.src(path.src.html)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(gulp.dest(path.build.html))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("css:build", function () {
gulp.src(path.src.css)
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ["last 5 versions"],
        cascade: true
    }))
    .pipe(removeComments())
    .pipe(cssbeautify())
    .pipe(gulp.dest(path.build.css))
    .pipe(cssnano({
        zindex: false,
        discardComments: {
            removeAll: true
        }
    }))
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest(path.build.css))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("js:build", function () {
gulp.src(path.src.js)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(gulp.dest(path.build.js))
    .pipe(uglify())
    .pipe(removeComments())
    .pipe(rename("main.min.js"))
    .pipe(gulp.dest(path.build.js))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("fonts:build", function() {
gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts));
);


gulp.task("image:build", function () {
gulp.src(path.src.img)
    .pipe(imagemin({
        optimizationLevel: 3,
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        interlaced: true
    }))
    .pipe(gulp.dest(path.build.img));
});


gulp.task("clean", function (cb) {
rimraf(path.clean, cb);
});


gulp.task('build', function (cb) {
run(
    "clean",
    "html:build",
    "css:build",
    "js:build",
    "fonts:build",
    "image:build"
, cb);
});


gulp.task("watch", function() {
watch([path.watch.html], function(event, cb) {
    gulp.start("html:build");
});
watch([path.watch.css], function(event, cb) {
    gulp.start("css:build");
});
watch([path.watch.js], function(event, cb) {
    gulp.start("js:build");
});
watch([path.watch.img], function(event, cb) {
    gulp.start("image:build");
});
watch([path.watch.fonts], function(event, cb) {
    gulp.start("fonts:build");
});
});


gulp.task("default", function (cb) {
   run(
      "clean",
      "build",
      "webserver",
      "watch"
   , cb);
});

拒绝从'...'应用样式，因为不支持样式表MIME类型

0 个答案: