Prevent css-loader from requiring urls but also prepend root

[no1melman]

I have my folder structure like so:

myApp
 +-- src
 |     |-- index.js
 |     |-- index.css
 +-- resources
 |     |-- fonts
 |     +-- images
 |     |     |-- portrait.png
 |     |     |-- bg.png

My webpack I have this

rules: [
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: { loader: 'css-loader', options: { url: true, root: 'http://localhost:8080/' } }
        }),
        exclude: /node_modules/
    },
    {
        test: /(\.png|\.jpg|\.otf)$/,
        use: ['file-loader?name=[name].[ext]&publicPath=assets/&outputPath=assets/']
    }
]

In the index.js file I have this

import './resources/images/portrait.png' // <- this is handled by the file loader
import './index.css' // <- this should be handled by the ExtractTextPlugin and css-loader
// blah blah
export default Index;

In the index.css file I have this:

.background {
    background: url('/assets/portrait.png') 0 center;
}

So I have to have { url: true } in order for the { root: 'http://localhost:8080/' } to be prepended - however, it seems like it's trying to make a js module and requiring in the asset, which isn't what I want.....

Is there anyway to prevent the css-loader from trying to resolve the url but still have the root prepended

[no1melman]

Well,

I ended up using alias - although it doesn't seem to be for the purpose I'm using it.

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: { 
            loader: 'css-loader', 
            options: { 
                root: 'http://localhost:8080/',
                alias: {
                    './assets': path.resolve(__dirname, './resources/images')
                }
            } 
        }
    }),
    exclude: /node_modules/
}

[michael-ciniawsky]

This isn't currently supported by the loader, but it should provide an option to filter certain url's from assets resolving and ignore protocol urls (https://) by default. It's a known issue, when I have spare time I will implement this. Does options.alias do the trick for you atm ? If so please close the issue :)

[no1melman]

It does do the trick - if not a little bit backwards 😄 I don't mind looking into this if it isn't too big. Just point me to the line that does the resolve (I haven't been able to find that bit yet)

[michael-ciniawsky]

#655