Not working with UglifyJsPlugin()

[DmitryFillo]

I use resolve-url-loader like that:

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style', 'css!resolve-url!sass?sourceMap'
    )
}

And it works.

But if I add UglifyJsPlugin() to the plugins

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

then resolve-url-loader seems not working, I get relative path errors like without resolve-url-loader.

I think UglifyJsPlugin breaks resolve-url-loader by switching all other loaders to the min mode, but not sure.

Can anyone help with it?

[bholloway]

I haven't heard of this problem before so it may be avoidable with configuration. I use Esmangle plugin myself. You could take a look at that as a stop gap measure. I am hoping other users can shed some light on this problem.

[bholloway]

Can you please let me know what version of Webpack this is.

I am a bit confused by this comment. Is it saying the problem:
(a) only exists in Webpack 2, or
(b) exists in Webpack 1 and was fixed in Webpack 2

What is your interpretation?

[DmitryFillo]

It was Webpack 1. I think that comment is referred to Webpack 2.

[urbanhusky]

I'm facing exactly the same issue. Development builds run fine, but production builds with new webpack.optimize.UglifyJsPlugin() fail:

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss
    Module not found: Error: Cannot resolve 'file' or 'directory' ../../assets/fonts/glyphicons/glyphicons-halflings-regular.eot in C:\work\myproject\app\scss
     @ ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss 6:127769-127842 6:127860-127933

I'm using Webpack 1.13.3

[pablodgonzalez]

This issue occurs because when we use the UglifyJsPlugin the sass-loader get the output style compressed and then the resolve-url-loader get the position of the declaration from compressed style and not the original. So the row and column passed to sourceMapConsumer.originalPositionFor function don't match with the sourcemap.
I don't know if there is a issue with the sourcemap mapping or the sourcemap created by the sass-loader. Maybe it only occurs when there are imports in main scss file, I don't research deep enough.
However you can get a workaround forcing the sass-loader to expanded style.
sassLoader = { outputStyle: 'expanded' };
and let the css-loader the minimize action.

[pablodgonzalez]

And... there is the real bug! sass/node-sass#957

[bholloway]

Thanks @pablodgonzalez for your investigation.

[LunaBawa]

Cant seem to find my around this problem.... anyone with an idea on how please

[bholloway]

@LunaBawa Please edit your comment and replace the image with useful text.

At first glance I do not see how your project can build, so I wonder if it is related to this issue at all.

The root cause of this issue is a SASS bug per @pablodgonzalez's post above. If the {outputStyle: 'expanded'} solution not solve your problem it is likely you have a separate issue.

Given you are loading css files (and not sass or less) I question why you are using this loader.

Place your assets next to the css file that uses it, or give a full relative path, or use the resolve option to make the /assets directory a root.

[bholloway]

The sass issue sass/node-sass#957 appears to be still open.

Presuming Sass is the root cause I'm inclined to close this issue. Certainly Sass is implied but it is not a direct dependency.

That said please refer to #97 as version 3 may help any open issues.

[bholloway]

I'm going to close this issue since the bug is in Sass and webpack 4 changes the minification to use other means. Please refer to the Webpack 4 example in tests.

Please open a fresh issue for any ongoing problems and link to this one as needed.