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

well it is missing the default task, something like gulp.task('default', function() { //tasks to run on gulp command }); — dippas
– dippas, Commented Apr 26, 2022 at 16:59

Jillian Hoenig · Accepted Answer · 2022-04-29 17:15:57Z

0

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

answered Apr 29, 2022 at 17:15

Jillian Hoenig

3371 gold badge7 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Nested scss variables not compiling with gulp

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