Webpack url and file downloaders do not work on Angular 2 required component styles

Question

I am building an application with angular 2, sass and webpack, and I am having problems with the url on the sass files that are required inside each component (using require); it does not accept these files and does not copy them to the resource folder and does not change the URL for the constructed CSS styles. It works correctly when I use import and with assets inside html components.

loaders:

...{ test: /\.html$/, loader: 'html' }, { test: /\.(png|jpe?g|gif)$/, loader: 'file?name=assets/[name].[hash].[ext]' }, { test: /\.scss/, exclude: helpers.root('src', 'app'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') }, { test: /\.scss$/, include: helpers.root('src', 'app'), loaders: ['raw', 'resolve-url', 'sass?sourceMap'] }... 

Require styles:

 ... styles: [require('./hero-image.scss')] template: require('./hero-image.component.html') ... 

Sass

 ... background: url('../../../public/img/hero-bg.jpg'); ... 

Here, the loaders (during assembly) should copy hero-bg.jpg to / assets /, and the background css built should have /assets/hero-bg.jpg , but it does not copy the image to folders with resources, and css builded remains as an audacity .

NOTE. . When I use import instead of the required one (changing the loader rules, of course), at the moment it works correctly. Inside the html component (hero-image.component.html) I have this <img src="../../../public/img/btn-google-play.jpg" /> , and it works correctly too .

I am trying to use this angular 2 starter pack , and a problem also occurs.

Thanks for the help, I really appreciate it.

Edit: I forgot to mention that this also happens using only css (without sass) and after the official angular documentation about the web package

Answer 1

After much research and numerous attempts, I found an approach using exports-loader that works and can be easily updated.

 { test: /\.scss$/, include: helpers.root('src', 'app'), loaders: ['exports-loader?module.exports.toString()', 'css', 'sass'] } 

Thanks @BobSponge for your help, you directed me in the right direction.

Answer 2

Looks like the wrong configuration example in Angular docs.

None of these loaders process url() in css and publish assets to the destination folder: 'raw', 'resolve-url', 'sass' . Despite its name, the resolve-url loader simply replaces relative URLs with the appropriate css-loader .

So you should add css-loader to the latest scss loader configuration:

 { test: /\.scss$/, include: helpers.root('src', 'app'), loaders: ['css', 'resolve-url', 'sass?sourceMap'] } 

Styles require change:

 styles: [require('./hero-image.scss').toString()] 

---

From docs : @import and url(...) [in css files] are interpreted as require() and css-loader will be allowed.

Answer 3

An alternative to exports-loader?module.exports.toString() is to use the to-string-loader mentioned in the css-loader readme