Conflicting imports node-sass-package-importer

[armpogart]

Simplified example (minimum test case): I have following directory structure:

src
  styles
    main.scss
    _variables.scss

main.scss:

@import "variables";
@import "~bootstrap";

package.json:

{
  "name": "test-kit",
  "dependencies": {
    "bootstrap": "^4.0.0"
  },
  "devDependencies": {
    "gulp": "4.0.0",
    "gulp-cli": "^2.0.1",
    "gulp-sass": "^3.1.0",
    "node-sass-magic-importer": "^5.1.0"
  }
}

gulpfile.js:

const gulp = require('gulp');

// Gulp Plugins
const sass = require('gulp-sass');
const magicImporter = require('node-sass-magic-importer');

gulp.task('styles', () => {
  return gulp.src('./src/styles/main.scss')
      .pipe(sass({
          importer: magicImporter(),
          precision: 8,
      }).on('error', function(err) {
          sass.logError(err);
      }))
      .pipe(gulp.dest('./dist'));
});

Running gulp styles I get error:

Error in plugin 'sass'
Message:
    node_modules\bootstrap\scss\_grid.scss
Error: Undefined variable: "$enable-grid-classes".
        on line 5 of node_modules/bootstrap/scss/_grid.scss
>> @if $enable-grid-classes {
   ----^

The issue here, is bootstrap main scss file has its' own @import "variables" declaration and the name is conflicting with my local scss file import, so the bootstrap one isn't being imported. If I rename my local _varables.scss to something else everything will work. The same problem can be encountered with any filename (I had local _variables.scss and _mixins.scss, both were conflicting with bootstrap's own files, so had to rename them).

[maoberlehner]

Hey @armpogart

thanks for taking the time for writing such a detailed bug report. I'll look into this the next couple of days.

Thank you for contributing.

[maoberlehner]

That was a tough one. Thank you very much for providing this very detailed and helpful bug report. I'm currently publishing 5.1.1 containing the fix for this bug.