Gulp: Index. html не загружается таблица стилей - PullRequest
Новая
       1

Gulp: Index. html не загружается таблица стилей

0 голосов
/ 10 февраля 2020

Проблема

index.html не загружается мой .css файл. У меня настроен файл gulp.js, и я чувствую, что каталог папок может быть здесь блокирующим. Мои .scss файлы в папке /src/scss правильно компилируются в css в моей папке /build/css.

Желаемый результат

Для индекса. html чтобы загрузить мои css файлы и быть видимыми с помощью редактора стиля Firefox.

Каталог папок

enter image description here

Basi c HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link type="text/css" href="../build/css/styles.css" />
        <title>Boiler plate</title>
    </head>
    <body>
        <h1>Project name goes here</h1>
        <script src="./scripts/index.js"></script>
    </body>
</html>

Gulp. js file 

// const gulp = require('gulp');
const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

//Compile SCSS into CSS
function style() {
    // 1. Find SCSS file
    return (
        src('./src/scss/**/*.scss')
            // 2. Pass through sass compiler
            .pipe(sass())
            .on('error', sass.logError)
            // 3. Where do save compiled css
            .pipe(dest('./build/css'))
            // 4. Stream changes to all browsers
            .pipe(browserSync.stream())
    );
}

// Watch for changes in src directory and make updates
function watchFiles() {
    browserSync.init({
        server: {
            baseDir: './src'
        }
    });
    watch('./src/scss/**/*.scss', style);
    watch('./src/*.html').on('change', browserSync.reload);
    watch('./src/scripts/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watchFiles = watchFiles;
exports.default = series(style, watchFiles);

Текущие ошибки

Firefox Консоль показывает следующую ошибку 

The resource from “http://localhost:3000/build/css/styles.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

Когда я удаляю rel="stylehseet" и заменяю на type="text/css", ошибка исчезает. Однако, та же проблема сохраняется ... Файл CSS не загружен.

1 Ответ

2 голосов
/ 10 февраля 2020

Мы не используем атрибут «type» в элементе «link». Атрибут "type" не обязателен в HTML5.

Вместо этого используйте атрибут "rel". "rel" означает Отношения. Он используется для определения связи между связанным файлом и документом HTML. Поэтому, если вы измените тег ссылки, как показано ниже, он должен работать. 

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