WebPack 2 no source maps

[ssylvia]

I'm unable to get source maps to work. Here is my config file:

const extractCSS = new ExtractTextPlugin({
  disable: !isProduction,
  filename: 'app/css/[name].css',
});

const webpackConfig = function webpackConfig() {
  return {
    devtool: 'source-map',
    ...
    module: {
      rules: [
        {
          include: [
            path.resolve(__dirname, './src'),
            path.resolve(__dirname, './node_modules/calcite-web/dist/'),
            path.resolve(__dirname, './node_modules/storymaps-shared-components'),
          ],
          loader: extractCSS.extract({
            fallbackLoader: ['style-loader'],
            loader: [
              {
                loader: 'css-loader',
                query: {
                  minimize: isProduction,
                  sourceMap: true,
                },
              },
              {
                loader: 'postcss-loader',
              },
              {
                loader: 'sass-loader',
                query: {
                  sourceMap: true,
                  sourceMapContents: true,
                },
              },
            ],
          }),
          test: /\.(scss)$/,
        },
      ],
    },
    ...
}

[JimmyMultani]

I'm having this same issue. Any assistance in this matter would be greatly appreciated.

Here's my config:

devtool: (env === 'development') ? 'source-map' : false,
...
{
  test: /\.(sass|scss)$/,
  include: path.join(__dirname, 'src/sass'),
  loader: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    loader: [
      {
        loader: 'css-loader',
        query: {
          minimize: (env === 'production'),
          modules: true, // enables CSS Modules spec
          sourceMap: (env === 'development'),
          importLoaders: 2, // will import previous amount of loaders
        },
      },
      'postcss-loader',
      {
        loader: 'sass-loader',
        query: {
          sourceMap: (env === 'development'),
          sourceMapContents: (env === 'development'),
        },
      },
    ],
  }),
},
...

[ssylvia]

@folmert This is the new syntax shown in Webpack 2 config file: https://webpack.js.org/configuration/.

FWIW, I do get source maps to the compiled CSS file but not back to the original SCSS file. I tested without using the ExtractTextPlugin and have the same issue.

[albohlabs]

Does somebody solved this issue for webpack2.

[leyyinad]

Works for me using LoaderOptionsPlugin like this:

new webpack.LoaderOptionsPlugin({
  options: {
    context: '/', // <- putting this line right under "options" did the trick 
    postcss: [autoprefixer],
    sassLoader: {
      includePaths: [
        resolve(join(baseDir, 'node_modules')),
      ],
    },
  },
}),

[Mario-Eis]

+1 same issue here

[albohlabs]

On survivejs the author advises to enable sourcemaps for every loader, which solved the issue for me.

If you have multiple loaders in a chain, you have to enable sourcemaps separately for each.

[Mario-Eis]

Its configured directly for the sass loader. but no source maps are in the output. This is how i did it:

{
    loader: 'sass-loader',
    options: {
       sourceMap: true
    }
}

[Mario-Eis]

It seems to be working when using the ExtractTextPlugin. But not without. If used a loader directly.

[albohlabs]

Do you also use the the css-loader?
Do you have a reference to a sourcemap at the bottom of you compiled stylesheet?

[aeharding]

For me, I had to upgrade ExtractTextPlugin to the latest version (as of now, rc3).

[ndraiman]

Same issue, none of the above suggested solutions worked for me.

...
{
    test: /\.scss$/,
    exclude: [helpers.root('src', 'app')],
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
            query: {
                modules: false,
                sourceMap: true,
                importLoaders: 2
            }
        }, {
            loader: 'postcss-loader'
        }, {
            loader: 'sass-loader',
            query: {
                sourceMap: true,
                sourceMapContents: true
            }
        }]
    })
},
...

[jhnns]

@nexxado the option is called sourceMap without s. Also for the css-loader.

See example

[ndraiman]

@jhnns Thank you, rookie mistake, I've corrected my comment as well.
though the issue yet remains.

[gaiaz-iusipov]

Any progress on this?

[goesbysteve]

@aeharding could you provide your webpack config? Anyone using Bootstrap 4? I only get invalid entries in the sourcemap from Bootstrap scss I import.

/Users/steve.gibbings/WebstormProjects/wcp-core/wordpress/themes/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:277
      throw new Error('Invalid mapping: ' + JSON.stringify({
      ^

Error: Invalid mapping: {"generated":{"line":1,"column":2788},"source":"webpack:///src/node_modules/bootstrap/scss/mixins/_hover.scss","original":{"line":21,"column":-1},"name":null}

/**
 * Created by steve.gibbings on 11/03/2016.
 */

// What's the environment Kenneth? https://www.youtube.com/watch?v=jWkMhCLkVOg
// Use the supported browser list defined in im-fabric.
process.env.BROWSERSLIST_CONFIG = '.browserslist';
const ENV = process.env.NODE_ENV || 'production';
const isDevBuild = ENV === 'dev' || ENV === 'testing';
const isProdBuild = ENV === 'production';

console.log(`${ENV} : Building ${isDevBuild ? 'dev' : isProdBuild ? 'production' : 'unknown'}`);

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin(
  !isDevBuild ? './css/[name]-[contenthash].css' : './css/[name].css'
);

module.exports = {
  entry: {
    main: [
      'modernizr',
      'js/polyfills/polyfills',
      'js/entry',
    ],
    style: [
      'scss/style.scss',
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: !isDevBuild ? './js/[name]-[chunkhash].js' : '[name].js',
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    alias: {
      modernizr$: path.resolve(__dirname, ".modernizrrc"),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          'eslint-loader',
        ],
        include: [
          path.resolve(__dirname, 'src/js'),
          path.resolve(__dirname, 'tests/js'),
        ],
        exclude: [
          /(node_modules)/,
        ]
      },
      {
        test: /\.scss$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                autoprefixer: {
                  add: true,
                  cascade: false,
                },
              },
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'src/scss'),
                ],
                sourceMap: true,
              },
            },
          ],
        }),
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name]-[hash].[ext]',
              context: './src/images',
              outputPath: 'images/',
              publicPath: '../images/'
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            },
          },
        ],
      },
      {
        test: /\.modernizrrc.js$/,
        use: "modernizr-loader"
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        loader: "modernizr-loader!json-loader"
      }
    ],
  },
  plugins: [
    // Clean the dist build folder
    new CleanWebpackPlugin(['dist/js', 'dist/css']),
    // Extract CSS
    extractCSS,
    // Avoid publishing files when compilation fails
    new webpack.NoEmitOnErrorsPlugin(),
    // new webpack.optimize.CommonsChunkPlugin('common.chunk.js'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV),
        'BROWSERSLIST_CONFIG': '.browserslist',
      }
    }),
    !isDevBuild ? new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
    }) : null,
    !isDevBuild ? new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }) : null,
  ].filter(plugin => plugin !== null),
  stats: {
    // Nice colored output
    colors: true,
  },
  // Create Sourcemaps for the bundle
  devtool: 'source-map',
  watch: isDevBuild,
};

[antoniojunyor]

Try this: devtool: 'inline-source-map'

[jhnns]

Closing this one since it is not an actual bug description. We know that source maps do work with webpack 2 and sass-loader. However, there can be issues depending on the language features you are using, like #351

[hvalcourtSerdy]

For the "throw new Error('Invalid mapping: ' + JSON.stringify", it appears this may be related to sass/libsass#2312

[alexander-akait]

@hvalcourtSerdy The known problem, unfortunately it has not been solved for a long time

[xtepwxly]

I faced the same problem, but after reading this part of the post-css docs, I figured everything out...
https://github.com/postcss/postcss-loader#sourcemap

use: [
    {
         loader: 'css-loader',
         options: { sourceMap: true, importLoaders: true, }
    },
    {
        loader: 'postcss-loader',
        options: { 
             sourceMap: 'inline', 
             plugins: function() { 
                  return [ require('autoprefixer') ] 
             } 
        }
    },
    {
         loader: 'sass-loader',
         options: { sourceMap: true }
     },
],

[kang-chen]

I'm using "webpack": "^3.0.0"

Webpack config devtool: devtool: 'source-map'

This is a working config without postCSS:

      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use:  [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]-[local]___[hash:base64:5]'
              }
            },
            { loader: 'sass-loader', options: { sourceMap: true } }
          ]
        })
      }

Found here

[alexander-akait]

@kang-chen your config is invalid, why your use sass-loader for css extension? Your spent time on sass compilation for css, it is bad.

[kang-chen]

@evilebottnawi thanks for the recommendation, corrected with test: /\.scss$/

[anilnamde]

@kang-chen devtool : "source-map" worked well. Only concern is it might affect performance of JS bundle as well.