Sass loader hangs compilation

问题

I am using webpack version 2.2.0 and sass-loader 4.4.1, and @angular/core is 2.4.4

when I run the command : npm run serve it make hang command prompt on 62% sometimes 61% or 63%. Here below id dev dependencies of package.json:

  "devDependencies": {
    "@types/core-js": "0.9.35",
    "@types/googlemaps": "3.26.2",
    "@types/node": "6.0.60",
    "@types/uglify-js": "2.0.27",
    "angular2-template-loader": "0.4.0",
    "awesome-typescript-loader": "2.2.4",
    "copy-webpack-plugin": "3.0.1",
    "css-loader": "0.25.0",
    "exports-loader": "0.6.3",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.26.0",
    "imports-loader": "0.6.5",
    "json-loader": "0.5.4",
    "metrojs": "0.9.77",
    "napa": "2.3.0",
    "node-sass": "4.2.0",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "1.6.1",
    "rimraf": "2.5.4",
    "sass-loader": "4.1.1",
    "sass-to-js": "1.3.0",
    "source-map-loader": "0.1.6",
    "style-loader": "0.13.1",
    "ts-helpers": "1.1.2",
    "typedoc": "0.4.5",
    "typescript": "2.0.2",
    "url-loader": "0.5.7",
    "webpack": "2.2.0",
    "webpack-dashboard": "0.2.1",
    "webpack-dev-middleware": "1.9.0",
    "webpack-dev-server": "2.2.0",
    "webpack-md5-hash": "0.0.5",
    "webpack-merge": "2.4.0"
  },

Here below is code of webpack.common.js file.

const webpack = require('webpack');
const helpers = require('./helpers');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const METADATA = {
  title: 'Azimuth - Angular 2 Admin Template',
  description: 'Admin template based on Angular 2, Bootstrap 4 and Webpack',
  baseUrl: './'
};

module.exports = {

    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'main': './src/main.ts'
    },

    resolve:{
        extensions: ['.js', '.ts', '.css', '.scss', '.json'],
        modules: [helpers.root('src'), 'node_modules']
    },

    module: {       
        loaders:[ 
             {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader'
                ],
                exclude: [/\.(spec|e2e)\.ts$/]
             },
             {
                test: /\.json$/,
                loader: 'json-loader'
             },
             {
                test: /\.css$/,
                loader: 'raw-loader'
             },
             {
                test: /\.scss$/,
                loaders: ['raw-loader', 'sass-loader'] // here if i comment sass-loader then worked.
             },
             {
                test: /initial\.scss$/,                
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader!sass-loader?sourceMap'
                })
             },

             {
                test: /\.woff(2)?(\?v=.+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
             },

             {
                test: /\.(ttf|eot|svg)(\?v=.+)?$/,
                loader: 'file-loader?&name=fonts/[name].[ext]'
             },
             {
                test: /bootstrap\/dist\/js\/umd\//,
                loader: 'imports?jQuery=jquery'
             },
             {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [helpers.root('src/index.html')]
             },  
             { 
                 test: /\.(png|jpg|gif)$/,
                 loader: 'file-loader?limit=8192&name=assets/img/[name].[ext]'
             }           
        ]
    },

    plugins:[
        new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
        new ForkCheckerPlugin(),

        new ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('src')
        ),


        new webpack.optimize.CommonsChunkPlugin({
            name: ['polyfills', 'vendor'].reverse()
        }),
        new CopyWebpackPlugin([{
            from: 'src/assets',
            to: 'assets'
        }]),
        new HtmlWebpackPlugin({
            title: METADATA.title,
            template: 'src/index.html',
            chunksSortMode: 'dependency',
            metadata: METADATA
        }), 
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery',
            'Tether': 'tether',
            'window.Tether': 'tether',
            Datamap:'datamaps',
            Skycons: 'skycons/skycons',
            Dropzone: 'dropzone',
            moment: 'moment',
            fullCalendar: 'fullcalendar'
        })

    ],

     node: {
        global: true,
        crypto: 'empty',
        process: true,
        module: false,
        clearImmediate: false,
        setImmediate: false
    }
}

If I do comment sass-loader in

loaders: ['raw-loader', 'sass-loader']

line and use the

loaders: ['raw-loader', 'css-loader', 'style-loader']

then it skips the hang but css does not appear.

I have tried with update all the modules in package.json file but nothing got help with that. I am not sure why it is getting hang. Is there any issue of compatibility in versions or else?

来源：https://stackoverflow.com/questions/49818744/sass-loader-hangs-compilation