GULP and SASS error passing variable

1
votes

I have a GULP processed directory running these SCSS files, but it keeps throwing an error when I run GULP

Error: Undefined variable: "$hover-color". on line 18 of src/scss/styles.scss

  color:$hover-color;

But when I run it in SassMeister it seems to work fine!

If anyone can help...

The code is located on git: https://gist.github.com/cwjones73/c5268f3bb40654a43696a50b33592cce

for those that cant access git I've added these:

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        //server: "http://localhost/wordpres/",
        proxy: "http://localhost/isGulp/bs4/src"
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("**/*.php").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

/src/scss/style.scss

@import "_variables.scss";

body {
    background: $bg-color;
}
h1{
  font-size: $sizeofheader;
  color:$header-color;
}
h2{
  font-size:$sizeofheader - 7px;
  color:$header-color;
}
a{
  color:$link-color;
    &:hover{
      color:$hover-color;
    }
}

/src/scss/_variables.scss

$bg-color: red; 

$sizeofheader: 28px;
$header-height: 150px;

$color-yellow: yellow;
$color-red: purple;
$color-white: white;

$header-color: $color-yellow;
$link-color: $color-red;
$hover-color: $color-white;

index.html

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>Bootstrap 4 Layout</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
        <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
<body>
<div class="container gradient">
  <h1>This H1 text</h2>
  <h2><a href="#">This is h2 text</a> </h2>  
  </div>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</html>
3
csssassgulp
Where are you declaring the variable? If it's in a different file you'll need to import it. cant access that link at work so not 100% sure what the issue is - Gezzasa
sorry, Yes I understand. Its only due to the fact that www.sassmeister.com can only run with one file. The original has an import @import "_variable.scss"; - cjones

3 Answers

1
votes

Thanks for all your helps. I'm sure these bug detections will come in handy in future projects although, I've figured the issue.

I'm running bootstrap 4 and it appears to already have the variable: $hover-color so I changed it to $hoverover-color and it seems to work fine now!

It makes sense why it worked ok in https://www.sassmeister.com/ as it wouldn't be including bootstrap 4 variables.

0
votes

Did you try this : 

$header-color: yellow;
$link-color: purple;
$hover-color: white;

Instead of this

$color-yellow: yellow;
$color-red: purple;
$color-white: white;

$header-color: $color-yellow;
$link-color: $color-red;
$hover-color: $color-white;
-1
votes

I have a suspicion that the version of Sass you're using is parsing the file, then executing includes - it's detecting the undefined variable during the initial parse and erroring out before executing the includes.

So on that note, try making a master scss file.

style.scss

@import "_variables.scss";
@import "_styles.scss";
// No actual CSS in this file

_variables.scss

$color-red: purple;
$color-white: white;

$link-color: $color-red;
$hover-color: $color-white;

_styles.scss

a {
    color: $link-color;

    &:hover {
        color: $hover-color;
    }
}