Angular 2 and Webpack - url() in SASS file cannot resolve even with resolve-url-loader

Question

I started my Angular 2 Webpack project from this official guide.

I went ahead and ran npm install --save-dev node-sass sass-loader resolve-url-loader. That went well.

My component is sitting at root/src/app/mycomponent/mycomponent.ts, and I'm referencing my scss in the heading this way:

@Component({
    selector: 'home',
    templateUrl: './mycomponent.html',
    styleUrls: ['./mycomponent.scss']
})

The scss file is at root/src/app/mycomponent/mycomponent.scss and I have the following SASS in there:

p{
    color: blue;
    background-image: url('./background.jpg');
}

That image is sitting at root/src/app/mycomponent/background.jpg.

In webpack.common.js I have the following rule for .scss files:

{
   test: /\.scss$/,
   exclude: 'node_modules',
   loaders:  ['style-loader','css-loader','resolve-url-loader','sass-loader?sourceMap']
}

as recommended by resolve-url-loader documentation.

I keep on getting this error:

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./src/app/mycomponent/mycomponent.scss Module not found: Error: Can't resolve './background.jpg'

I even tried loaders: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap!resolve-url-loader'}) and I'm still getting the same error.

For the life of me, I can't figure out what I did wrong. I was under the impression that resolve-url-loader will let me put a location in SASS url() relative to the .scss file it's declared in! That background.jpg sits in the same folder as my .scss file, so I think I referenced the path correctly.

I searched SO and the web and nobody seems to have the right solution. Is there any other code I need to show? Please help! And please, I don't want to import or require image files from .ts.

Update

It turns out that I misspelled the name of the image's file name. Now, I don't get that "module not found" error.

HOWEVER I now get the error in the browser's console output: Expected 'styles' to be an array of strings. This is with the configuration

loaders: ['style-loader','css-loader','resolve-url-loader','sass-loader?sourceMap']

Still stuck.

Maybe this can help you .see github.com/bholloway/resolve-url-loader/issues/32 — wuxiandiejia

Ben Yip Ben Yip · Accepted Answer · 2017-08-30T12:41:42

According to the error message, Angular is expecting assets to be strings while resolving the code. Thus in this situation, we need another loader here:

npm install --save-dev css-to-string-loader

Then in your webpack config file:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['css-to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},

It should be good to go now.

Angular 2 and Webpack - url() in SASS file cannot resolve even with resolve-url-loader

2 Answers