sass-loader version: 4.1.1

node-sass version: 4.1.1

webpack: 1.14

Node version: 7.3

I'm seeing my build with sass-loader failing on linux only (it's fine on a mac), but also not every time. i'm not totally sure if this is a sass issue or a sass-loader issue. It seems related to the webpack config, but I can't really see what's wrong. I am using the extract webpack text plugin, but the same bug happens without it.

It seems to be related to having 2 entry points reference the same set of sass.

Child extract-text-webpack-plugin:
    + 1 hidden modules

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/scss/alternate.scss
Module build failed: 
      @include media-query-phone() {
              ^
      Stack level too deep
      in /data/jenkins/workspace/build-branch/src/scss/elements/_grid.scss (line 88, column 16)
Child extract-text-webpack-plugin:
    + 1 hidden modules

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/scss/main.scss
Module build failed: 
      @include media-query-desktop() {
              ^
      Stack level too deep
      in /data/workspace/build-branch/src/scss/elements/_grid.scss (line 64, column 16)

at my root level, i have 2 sass files, main.scss and alternate.scss

//main.scss
@import 'folder1/**/*.scss';

//alternate.scss
@import 'folder2/thing';
@import 'main.scss';

none of the things inside folder 1 or 2 have any imports.

my webpack config entry points look like this

entry: {
  //doesn't happen if either of these is left out
  'main': './src/main.js', //the js file imports main.scss
  'alternate-sass': './src/scss/alternate.scss'
},

the mixins that are causing errors look like this

@mixin media-query-phone() {
  @media screen and (min-width: $phone-min-width) and (max-width: $tablet-min-width - 1) {
    @content;
  }
}

//used by
@include media-query-phone() {
   .blah{
     padding: 0;
   }
}
1

There are 1 answers

0
bdwain On BEST ANSWER

node-sass 4.3 fixed the issue.