David Velásquez Usuga David Velásquez Usuga - 1 year ago 114
Sass (Sass) Question

Webpack url and file loaders don't working on Angular 2 required component styles

I’m building an app with angular 2, sass and webpack and I’m having troubles with url on sass files that are required inside each component (using require); it doesn’t take those files and copy it to assets folder and don’t modify the url to the builded css styles.
It work's correctly when I use import and with the assets inside html component's.


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')


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

Here the loaders (when build) should copy hero-bg.jpg to /assets/ and in the builded css the background should be
but it doesn't copy the image to assets folders and css builded remains like the sass.

NOTE: When I use import instead of require (modifying the loaders rules of course) at this point it works correctly.
Inside the html component (hero-image.component.html) I have this
<img src="../../../public/img/btn-google-play.jpg" />
and it work's correctly too.

I try with this angular 2 starter pack and the issue also happens.

Thanks for helping, I really appreciate it.

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

Answer Source

After a lot of research and many attempts I found an approach using the exports-loader that work's 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 guided me in the right direction.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download