Can't override variable's default value with gulp

[timogwl]

My system:

MacOS 10.14.6 (18G7016)
Google Chrome 89.0.4389.72

node -v
v15.11.0

npm -v
7.6.1

gulp -v
CLI version: 2.3.0
Local version: 4.0.2

package.json

{
  "name": "bootstrap test",
  "version": "1.0.0",
  "description": "bootstrap test theme",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.0.0-beta2"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-dart-sass": "^1.0.2"
  }
}

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-dart-sass');

const path = {
  src: {
    styles: 'assets/src/styles/**/*.scss'
  },
  dest: {
    styles: 'assets/dist/styles/'
  }
};

gulp.task('styles', function () {
  return gulp.src(path.src.styles)
    .pipe(sass.sync({ includePaths: ['node_modules'] })
    .on('error', sass.logError))
    .pipe(gulp.dest(path.dest.styles));
});

gulp.task('watch', function () {
  gulp.watch(path.src.styles, gulp.series('styles'));
});

gulp.task('default', gulp.series('styles'));

assets/src/styles/app.scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$primary: purple;
$secondary: orange;

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
... and all other bootstrap files

This doesn't take any effect:

Only when I move the variables to the top it's working:

$primary: purple;
$secondary: orange;

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
... and all other bootstrap files

Where's the mistake?

[ffoodd]

First of all, you should not import _utilities.scss before you override variables. Please check our docs and maybe have a look at Bootstrap-npm-starter's main Sass file.

I don't know if that's enough to solve your case, however iI'm pretty sure it has nothing to do with Gulp. Would you mind trying to import utilities at the end (like we do)?

[timogwl]

I checked out the bootstrap-npm-starter repo but that's based on Bootstrap v4.6.0. In Bootstrap v5 the _utilities.scss is imported in 4th place in bootstrap.scss:

/*!
 * Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
...

But in the docs it's not mentioned:

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Include custom variable default overrides here

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

Because of that I also tried this order of imports:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

$primary: purple;
$secondary: orange;

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
...
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";

But this didn't help either.

[ffoodd]

Ok got it: that's a duplicate of #33070 (initially #43 in bootstrap-npm-starter where @mdo summarizes current overrides constraints. That's basically due to variables referencing other variables.

This relates to #33263 too, since it'd provide a way to ease things out.

I'm closing this one as a duplicate, but I guess we'll really need to implement #33623 (or that kind of structural change) before we hit stable.