Angular 4 webpack sass sourcemap file almost empty (using ExtractTextPlugin)

Question

I am referencing a sass file (app.scss) as an import (was getting an error when including it in the styleUrls array)

import { Component, ViewEncapsulation } from '@angular/core';
import '../../assets/css/app.scss';

@Component({
    selector: 'appMain',

    styleUrls: [
        '../../../../node_modules/ng2-toastr/bundles/ng2-toastr.min.css',
    ],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.main.component.html'
})
export class AppMainComponent {
}

Using webpack with my current configuration which includes using ExtractTextPlugin, my resulting app.css.map file is basically empty. It looks like:

{"version":3,"sources":[],"names":[],"mappings":"","file":"app.css","sourceRoot":""}

What do I need to change to get the source map file to be generated correctly? My webpack.config.js file looks like:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const extractCSS = new ExtractTextPlugin('app.css');
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, include: [/ClientApp/, /\$\$_gendir/], use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({
                        use: [{
                            loader: "to-string-loader"
                        }, {
                            loader: isDevBuild ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true
                            }
                        }] })
                }
            ]
        },
        plugins: [     
            extractCSS,
            new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });
    return [clientBundleConfig];
};

Answer 1

Able to recreate the scenario of yours , by using the scss rule that you have mentioned :

Rule of your's:

 {
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({   
                        use:[ {loader: 'to-string-loader'},
                        {
                            loader: true ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true,
                            }
                        }] }
                      )
                }

app.css.map :

{"version":3,"sources":[],"names":[],"mappings":"","file":"app.css","sourceRoot":"webpack:///"}

By removing the to-string-loader for scss did the trick for me !!!

Modified Rule:

{
                    test: /\.scss$(\?|$)/,
                    exclude: /node_modules/,
                    use: extractCSS.extract({   
                        use: [
                        {
                            loader: true ? 'css-loader' : 'css-loader?minimize', options: {
                                sourceMap: true
                            }
                        }, {
                            loader: 'sass-loader', options: {
                                sourceMap: true,
                            }
                        }] }
                      )
                }

solved app.css.map

{"version":3,"sources":["./src/assets/css/src/assets/css/app.scss"],"names":[],"mappings":"AAAA;EACI,uBAAsB,EACzB","file":"app.css","sourcesContent":[".ampati{\n    background-color: blue;\n}\n\n.hareesh{\n    @extend .ampati;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/assets/css/src/assets/css/app.scss"],"sourceRoot":"webpack:///"}

Plugin is the same that you have used [ExtractTextPlugin] and SourceMapDevToolPlugin, kept as it is in the plugin list(from ng eject) . I believe that this will mostly resolve the issue that you are facing !!

Hope this helps !!! If not please provide the git url of your code base

Ref: https://github.com/webpack-contrib/sass-loader/issues/309