sass-loader: Silently fails/stalls webpack with no error

I have 2 imports that I use in multiple scss files that look like the following:

@import 'variables';
@import 'functions';

Everything works fine until I hit one file that has the exact same imports. Then, I see webpack build stall and it shows no errors. If I remove the import for this file, everything works, if I add it, it stalls. I don’t understand why its happening because it’s using the exact same imports. Problem still occurs if I remove everything in that file except for the imports. Problem does not occur if I remove the imports as well.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 61 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Does putting env UV_THREADPOOL_SIZE=100 before node invocation help? If yes, then this is sass/node-sass#857

When someone says it’s a threading issue…

This is still happening, 2 years and there is no final resolution? I’m using node-sass 4.5.0 and sass-loader 6.0.1. Although UV_THREADPOOL_SIZE=100 seems to solve the issue, it makes the compilation time slower. I’m afraid what’s gonna happen when the project keeps growing.

happens “sass-loader”: “^4.0.2”,

Webpack stalled at compiling Javascript files through babel.

Adding the options below to webpack.config.js solved the issue for me. These options are described in docs.

watchOption: {
  aggregateTimeout: 1,
  poll: 1000
}

So my Webpack config file looks now like this

var path = require('path');

module.exports = {
  entry: ["./js/index.js"],
  devtool: "source-map",
  output: {
    path: path.join(__dirname, 'public/dist'),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: "babel",
        query: {
          presets: ["es2015"],
          plugins: ["transform-flow-strip-types", "transform-class-properties"]
        },
        include: [
          path.join(__dirname, 'js')
        ]
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css']
      },
      {
        test: /\.json$/,
        loaders: ['json'],
        include: [
          path.join(__dirname, 'js'),
        ],
      },

    ]
  },
  resolve: {
    extensions: ['','.js', '.jsx', '.json', '.css']
  },
  watchOptions: {
    aggregateTimeout: 1,
    poll: 1000
  }
};

From what i can gather, it’s really a cyclical import issue. I don’t think there’s anything to do for sass-loader other than to detect/report the problem for the user to fix.

I have same error with latest sass-loader

I just run into this exact same issue. I’m using "css-loader": "^0.23.1" in combination with "sass-loader": "^4.0.0". Every CSS module file imports the same vars.scss file. At first, that was fine but the project continued growing so I got more and more .scss files and now all of a sudden webpack is no longer able to finish.

My webpack configuration looks like this:

{
    devtool: 'eval',
    entry: {
        app: path.resolve(__dirname, 'start.js'),
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.jsx?$/,
            },
            {
                loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]--[local]___[hash:base64:5]!sass!postcss-loader'),
                test: /\.scss$/,
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('styles.css', { allChunks: true }),
    ],
    postcss: [
        Autoprefixer,
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    },
    watch: true,
}

Am I doing anything wrong? Is this a known problem of using CSS modules with SASS? Is there anything I can try to fix this either temporarily or permanently? Help with this would be truly appreciated since I’m completely stuck with this issue. Thank you!

Running into the same issue using a simple mixin, but not sure of it’s entirely the same or whether I should create a new issue. Using "sass-loader": "^3.1.2"

@mixin font-sans($font: 'Lato') {
    font-family: $font, sans-serif;
    font-style: normal;
}

@mixin font-sans-light {
    @include font-sans();
    font-weight: 300;
}

Note the @include font-sans() and its parenthesis. Passing something like @include font-sans('Lato'); works. Not passing something just silently stops gulp/webpack watch after just showing Begin compile at… and Finished 'webpack'….


Kind of a “nevermind” here as I just found the culprit, though I’d expect it to throw some errors.

Accidentally defined 2 mixins with the same name where one then referenced itself:

@mixin font-sans($font: 'Lato') {
    font-family: $font, sans-serif;
    font-style: normal;
}

@mixin font-sans {
    @include font-sans;
    font-weight: 400;
}

Probably stuck in an infinite loop or something and made it quit altogether.

It is explained by saper in sass/node-sass#857. The 4 internal threads are occupied by node-sass and then sass-loader tries to import a file from the filesystem, which stalls until one of the threads becomes available. This never happens.

I would really love if webpack community could produce a simple, self-contained setup to reproduce the issue.

I’m reporting the same issue. Putting env UV_THREADPOOL_SIZE=100 before webpack invocation does not help.