Webpack, Autoprefixer and Source Maps

Hi there,

I have an issue and I don’t know exactly where I should mention it. But I think this is the best place. I hope you can help me further.

I have a Webpack config file, to compile all Javascript and SCSS. For the SCSS I use the sass-loader, then resolve-url-loader, then postcss-loader and the css-loader is the last one.

In the options I pass the sourceMap: true, so I’ll have source maps for developing. But when I use autoprefixer, the linenumbers of the sourcemap aren’t correct.

I made a simple example with display: flex. Autoprefixer will add two lines for that. But when I check my Chrome Developers Console, the linenumbers are incorrect. The sourcemaps have included the two new lines, but in de .scss file I can only see display: flex;.

It is a little bit hard to explain, but I hope you understand.

let path = require('path');
let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

let webpackConfig = {

	entry: {
		'/js/main': [
			path.resolve( __dirname, 'src/js/main.js' ),
			path.resolve( __dirname, 'src/scss/main.scss' )
		]
	},

	output: {
		path: path.resolve( __dirname, 'public' ),
		filename: '[name].js',
		chunkFilename: 'js/[name].js'
	},

	devtool: false,

	stats: {
		hash: false,
		version: false,
		timings: false,
		children: false,
		errors: true
	},

	module: {
		rules: [{
			test: /\.s[ac]ss$/,
			use: ExtractTextPlugin.extract({

				fallback: 'style-loader',

				use: [{
					loader: 'css-loader',
					options: {
						importLoaders: 3,
						sourceMap: true
					}
				}, {
					loader: 'postcss-loader',
					options: {
						sourceMap: true
					}
				}, {
					loader: 'resolve-url-loader'
				}, {
					loader: 'sass-loader',
					options: {
						precision: 8,
						outputStyle: 'expanded',
						sourceMap: true
					}
				}],
			})
		}]
	},

	plugins: [

		new ExtractTextPlugin({
			filename: '/css/main.css',
			allChunks: true
		}),

		new webpack.LoaderOptionsPlugin({
			minimize: process.env.NODE_ENV === 'production',
		}),

		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: JSON.stringify( process.env.NODE_ENV )
			}
		})
	]
}

module.exports = webpackConfig;

[michael-ciniawsky]

Could you try without resolve-url-loader, it uses rework (deprecated) internally, just to have a third CSS tool in there 😉 and uses sourcemaps to resolve urls somehow.

Another source might be between postcss-loader => css-loader updating the sourcemap incorrectly, if you use just the simple main.scss file without any url() or @import, you can remove css-loader temporarily and just use postcss-loader as the loader will export a module instead of a {String} then. Also the { sourceMap: 'inline' } (postcss-loader) option might be helpful, which inlines the sourcemap generated by PostCSS directly as an annotation comment into the source (Firefox || Chrome >= 58 should support it), so we can ensure at least if it’s an issue with postcss-loader or not. If you could provide small test repo I can also take a look into it 😃

[ai]

Strange. Could you create a issue in postcss-loader. I am not sure that all options are passed correctly.

But, honesty, source maps between different tools (like Sass > PostCSS) doesn’t always work perfectly.

This is why using one tool for most of tasks is better. Also it will be much faster.