Undefined variables

[james-peel]

trafficstars

Hi,

We're having some trouble with the imported files being able to read our global SCSS variables.

We have a screen.scss file which imports all of our core sass skeleton, we're then looking to bulk import the SCSS file from the template (handlebars) folders elsewhere in the project:

@import "config/_vars.scss";
@import 'config/_mixins';
@import 'config/_placeholders';

// main skeleton 
@import 'site/_main';

// handlebar template styles
@import "_dev/_templates/src/*";

The import apparently works OK, but the SCSS vars are undefined in the imports, eg:

Error (gulp-sass): _dev/_templates/src/blocks/_layout/navPri.scss
  10:10  Undefined variable: "$white".
{ [Error: _dev/_templates/src/blocks/_layout/navPri.scss
  10:10  Undefined variable: "$white".]
  message: '_dev/_templates/src/blocks/_layout/navPri.scs

The paths looks like this:

/_dev/_source/styles/scss/site/_main.scss
/_dev/_source/styles/scss/screen.scss
/_dev/_templates/src/blocks/_layout/siteHeader.scss

Is there something I've overlooked here?

Thanks.

[mathisonian]

Hey @james-peel,

The way that the library works internally is to expand the matching globs inline, i.e.

@import "config/_vars.scss";
@import 'config/_mixins';
@import 'config/_placeholders';

// main skeleton 
@import 'site/_main';

// handlebar template styles
@import "_dev/_templates/src/*";

becomes

@import "config/_vars.scss";
@import 'config/_mixins';
@import 'config/_placeholders';

// main skeleton 
@import 'site/_main';

// handlebar template styles
@import "_dev/_templates/src/matching_file_1";
@import "_dev/_templates/src/matching_file_2";
// ... etc

and then this is passed to the scss compiler. To help debug your issue I would first try replacing the @import "_dev/_templates/src/*"; with a path to a specific file and confirm if that works correctly with the global variable

[denisborovikov]

Are you sure that error occurs when sass compile screen.scss not navPri.scss? navPri.scss is not a partial (has no underscore in the name) so sass could compile it as a standalone scss.

[james-peel]

Apologies @denisborovikov I'd been playing around with that to see what effect it has. They should indeed be partials.

@mathisonian If I link directly to _partial.scss (I have tried each individual partial) the partial SCSS compiles, once it is replaced with the wildcard though nothing is compiled.