webpack sass compliation stuck, however same works with similar other file also same problamatic sass file works with gulp-sass module

Question

I am using webpack to bundle my sass files with angular js modules. I am able to compile these sass files using gulp-sass however when I am trying using gulp-webpack (or webpack) then it stuck. On screen it doesn't move and it doesn't display any error. Suprisingly, other sass file with similar module works well with webpack. Not sure how to debug it. Following are more details.

webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    context:__dirname+'/application/client-src/js/application',
    entry: './App.js',
    output:{
        path:__dirname+'/application/public/js',
        filename:'open-site.js'        
    },
    plugins: [commonsPlugin],
    module: {
        loaders: [                       
            {test: /\.scss$/, loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"}            
        ]
    }
};

Following works using webpack

/* CardReviews.js*/
require("./../../../vendor/slick/jquery/slick");
require("./../../../vendor/slick/angular/slick");

var Utilities = require("./../../../../../utilities/Utilities");
var AppUtilities = require("./../../../../../utilities/AppUtilities");

require("./../../../../sass/application/card-reviews.scss");
module.exports = ['$sce', 'ApplicationConstants', function ($sce, ApplicationConstants) {
        return {
            restrict: "E",            
            template: require('html!./../../../../templates/CardReviews.html'),
            replace: true,
            scope: {
                cardReviews: '=',
                productPageBenefits: '='
            },
            link: function (scope, element, attrs) {                 

            }
        };
    }];

However when I add following and run "webpack" command then webpack stuck. Webpack screen doesn't move.

/* InPageNav.js*/
var Utilities = require("./../../../../../utilities/Utilities");
var AppUtilities = require("./../../../../../utilities/AppUtilities");
require("./../../../../sass/application/product-page-in-page-nav.scss");
module.exports = ['$location', '$anchorScroll', function ($location, $anchorScroll) {
        return {
            restrict: "E",            
            template: require('html!./../../../../templates/InPageNav.html'),
            replace: true,
            scope: {
                modules: '=',
                productPage: '=',
                iaCode: '='
            },
            link: function (scope, element, attrs) {


            }
        };
    }];

Folloing is my sass files for details

card-reviews.scss
/* card-reviews.scss
 * SASS file for product card reviews module.
 * @Author: Dilip Kumar
 * @Since: 01-May-2015
 */
//Opensite Customized bootstrap variables
@import "./../vendor/custom/bootstrap/variables";

//original  bootstrap variables
@import "./../vendor/bootstrap-sass-3.3.2/assets/stylesheets/bootstrap/variables";
@import "variables";
.card-reviews-module-title{    
    font: bold 1.5em BentonSans-Lt;
    color: #222;
    text-align: center;
    width: 280px;
    margin-left: auto;
    margin-right: auto;
    @media (min-width: $screen-sm-min) {
        font-size: 2.8em;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    @media (min-width: $screen-md-min) {

    } 
}

product-page-in-page-nav.scss

/* product-page-in-page-nav.scss
 * SASS file for product page in-page nav.
 * @Author: Dilip Kumar
 * @Since: 08-May-2015
 */
//Opensite Customized bootstrap variables
@import "./../vendor/custom/bootstrap/variables";

//original  bootstrap variables
@import "./../vendor/bootstrap-sass-3.3.2/assets/stylesheets/bootstrap/variables";
@import "variables";
.product-in-page-nav-item{
    font-size: .9em;
    padding-left: 7px;
    font-family: BentonSans-Md;
    width: $product-page-in-page-width;
    color: #4d4f53;    
    height: 35px;
    margin: 0;
    outline: 0 none;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: solid 1px rgba(119, 119, 119, 0.21);
    display: table-cell;
    vertical-align: middle; 
    &:active,
        &.active{
        background-color: #064284;
        color:white;
        text-decoration: none;
    }
    &:link,
        &:visited,
        &:hover,
        &:focus{
        text-decoration: none;
    }
}

a[data-ng-click]{
    cursor: pointer;
}

Please help. I am really don't know how to debug webpack command.

Answer 1

I also encountered a similar issue, where there would be no webpack error message even with --display-error-details flag. Seems like the problem is related to importing the same .scss files multiple times (Default max is 4 before it hangs).

The only fix it seems for this is a hack by increasing the UV_THREADPOOL_SIZE size. I haven't tried this out as it seems like a stopgap solution

sass-loader issue: https://github.com/jtangelder/sass-loader/issues/99

node-sass issue: https://github.com/sass/node-sass/issues/857

My solution was to not use webpack's require on multiple sass files that share the same variables.scss or similar files, but instead have webpack require a single sass file that includes all the @import dependencies

Edit:

Temporary fix for sass-loader in https://github.com/jtangelder/sass-loader/pull/109