Gulp: Index.html not loading stylesheet

Question

Problem

index.html is not loading my .css file. I have a gulp.js file set up and I feel the folder directory could be the blocker here. My .scss files in /src/scss folder are correctly compiling to css within my /build/css folder.

Desired outcome

For index.html to load my css files and be viewable withing Firefox style editor.

Folder directory

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

Current errors

Firefox console shows the followings error

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

When I remove the rel="stylehseet" and replace with type="text/css" the error dissappears. However, the same problem persists... No CSS file is loaded.

Answer 1

We don't use "type" attribute in "link" element. "type" attribute isn't necessary in HTML5.

Use "rel" attribute instead. "rel" stands for Relationship. It is used to tell the relationship between the linked file and HTML document. So if you modify your link tag as below, it should work.

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

Gulp: Index.html not loading stylesheet

Question

1 answers

solution1
2 2020-02-10 14:10:56

Gulp: Index.html not loading stylesheet

Question

1 answers

solution1 2 2020-02-10 14:10:56

solution1
2 2020-02-10 14:10:56