Nested scss variables not compiling with gulp

Question

I'm using gulp to compile my scss files. Everything worked until I got a new laptop, and now the nested variables aren't compiling.

For example, none of these colors compile:

$theme-colors: (
  primary: #002d72,
  secondary: #53565a,
  purple: #4e2984,
  light-purple: rgba(78, 41, 132, .8),
  light-blue: #69b3e7,
  error: #d72f09
);

Example of how a "theme color" would be called:

h3 {
  color: theme-color("primary");
}

I had to re-install npm and gulp, so I am obviously using different versions of these two packages then I was previously.

Here are the versions:

npm: 8.5.0
gulp: CLI version: 2.3.0
         Local version: 4.0.2
node: v16.14.2

My gulpfile looks like this (it handles scss and js files):

/* file: gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
const minify = require('gulp-minify');
var concat = require('gulp-concat');

gulp.task('sass', function(){
  return gulp.src('resources/assets/styles/**/*.scss')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('dist/styles'))
    .pipe(minify({
      ext: '.css',
      mangle: false,
      noSource: true
    }))
});

gulp.task('compress', function() {
   return gulp.src('resources/assets/scripts/*.js')
    .pipe(concat('main.js'))
    .pipe(minify({
      ext: '.js',
      mangle: false,
      noSource: true
     }))
    .pipe(gulp.dest('dist/scripts'));
});

gulp.task('watch', function() {
  gulp.watch('resources/assets/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('resources/assets/scripts/**/*.js', gulp.series('compress'));
});

Note: I added require('node-sass') to get gulp to work on the new computer.

If anyone has an idea of what's wrong here, it would be a huge help!

thanks!

Jill

Answer 1

The issue was caused by a discrepancy in the bootstrap node module versions. When the site was first built, it installed bootstrap version 4.3.1. After getting a new laptop and re-installing all the node modules, bootstrap 5.1 was installed.

Not exactly sure why bootstrap would affect scss variables, so if YOU know feel free to enlighten me.

To update the bootstrap version number, navigate to the directory containing the node_modules and run, npm install bootstrap@<version-number> --save