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.

First, using a relative path ("../build/css/styles.css") isn't a good idea, because this is relative to the current page path. So even if it works for index.html it won't work for /blog/entries.html or something like that (if you have more pages). Second, how is your css file being served, by which server? If your server adds caching headers telling the browser to cache the file, your browser won't load the changed css because the filename hasn't changed. Check your browser dev tools, network tab, for the response headers for the css file. — dirkgroten
– dirkgroten, Commented Feb 10, 2020 at 14:03
this is strange, did you check if the file was loaded? Did you get an error on the browser console? does the file appear in the network tab? — Gabriel Rodrigues Segalla
– Gabriel Rodrigues Segalla, Commented Feb 10, 2020 at 14:23
What happens if you jsut change this part href="../build/css/styles.css" to href="./build/css/styles.css"? — Mark
– Mark, Commented Feb 11, 2020 at 6:32
@dirkgroten I checked the network. Status for css is 404. It just can't be found — Samuel
– Samuel, Commented Apr 6, 2020 at 18:03
@GabrielRodriguesSegalla I have updated for error in console. I get 404 in network tab. — Samuel
– Samuel, Commented Apr 6, 2020 at 18:06

cipherdragon · Accepted Answer · 2020-02-10 14:18:18Z

2

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" />

edited Feb 10, 2020 at 14:18

answered Feb 10, 2020 at 14:10

cipherdragon

3732 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gulp: Index.html not loading stylesheet

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related