Generated image urls *must* be absolute for style!css?sourceMap to work?

[gryzzly]

Is there a way to make images load in browser when using style-loader/css-loader?sourceMap without specifying absolute url prefix as publicPath?

With this loader:

loaders.push({
  test: /\.scss$/,
  loader: 'style!css?sourceMap')
});

This works:

output = {
  path: 'build',
  publicPath: 'http://0.0.0.0:8080/'
  filename: 'bundle.js'
};

This doesn't:

output = {
  path: 'build',
  publicPath: '/'
  filename: 'bundle.js'
};

In the CSS modules generated as Blob the paths are relative to chrome:blob or chrome:devtools which doesn't refer to the correct assets.

If my assumption is correct and we always have to set absolute path in output.publicPath I will be happy to add a note about this to the docs.

[sokra]

If my assumption is correct and we always have to set absolute path in output.publicPath I will be happy to add a note about this to the docs.

yep. Do you want to add one in a PR?

[clessg]

Same problem here. Bit of a confusing bug to run into.

[Darkside73]

How to deal with HTTPS? Schema-less protocol does not work

[tizmagik]

Same question for https

[Darkside73]

I've figured out how to solve HTTPS issue. You can use your own dev server (take a look for https: true option) to serve assets. Here is the example https://gist.github.com/Darkside73/e3b70d72443e0f72b27b

[tizmagik]

Ah interesting. Thanks for sharing! I'll try that out.

For now, I actually ended up going about it slightly differently. Since my main issue was being able to use url('/images/sample.png') paths in CSS I defined ?root query string parameter for the css-loader and then specified ?name=[path][name].[ext] for the url-loader. This seemed to do the trick without having to specify the full URL in publicPath.

[pixelcure]

@tizmagik is this how you resolved the disappearing images? was this in webpack.config.js?

[tizmagik]

Yes, it seems to work fine even though using root is not recommended according to the docs for whatever reason.

[valerymercury]

@tizmagik can you provide an example of working config, please?

[creeperyang]

@tizmagik It will be helpful if you can provide a sample webpack.config.js or just loaders. Thanks in advance. @valerymercury set output.publicPath is a workround.

[valerymercury]

@creeperyang output.publicPath isn't working for me. As @tizmagik said root option helped me to fix bug with background images in css. I resolved my problem with the following config:

var cssRoot = env === 'development' ?
    'root=' + path.join(__dirname, 'app/assets') + '&' : ''

loaders: [
    {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'app/styles'),
        loader: ExtractTextPlugin.extract('style', 'css?'+ cssRoot +
            'sourceMap!postcss!sass?sourceComments&' +
            'includePaths[]=' + (path.resolve(__dirname, './bower_components/compass-mixins/lib/'))
        )
    }
]

[tizmagik]

@creeperyang sorry for the late reply, just saw this.

@valerymercury yeap, that's basically what I have as well. Here's mine if it's any more helpful:

const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}` + (DEBUG ? '&minimize' : '');

// ... loaders:

loaders: [
  {
    test: /\.css$/,
    loader: DEBUG ? `style!${CSS_LOADER}` : ExtractTextPlugin.extract('style', CSS_LOADER)
  }, // ...
]

[davidhouweling]

Has this been tested with relative pathed images (e.g. url(image.png))? It seems the solution provided is for absolute path images (e.g. url(/image.png)). I can't seem to use either solution suggested.

[tizmagik]

So unfortunately, this does not work when using CSS Modules, :local.

Has anyone been able to find another solution?

[schickling]

Facing the same problem at the moment...

[unimonkiez]

Me too

[Strate]

#96

[mbritton]

+1

[simshanith]

Still not working for me with an absolute public path, e.g. /build/. Even including the full public URL e.g. http://example.com/build/ does not seem to work.

[Pines-Cheng]

meet the same question, just working for me with an absolute public path.

[muralim4242]

url(${require('app/images/Rectangle-9.jpg')})

[olieidel]

just stumbled over this. if setting publicPath is not working for you, you probably are making the same mistake as I was by setting publicPath in the devServerconfig. it should be set in the webpack root config object in output. have a look:

doesn't work:

// your webpack config
{
  devServer: {
    publicPath: 'http://127.0.0.1:8888/'
   // ... more devServer config
  }
// ... more webpack config
}

works for me:

// your webpack config
{
  output: {
    publicPath: 'http://127.0.0.1:8888/'
    // ... more webpack output config
  }
  devServer: {
   // ... your devServer config
  }
// ... more webpack config
}

be sure to only set it in dev, who knows what this would do to your production build. good luck!

[bohdanly]

@simshanith to make it work specify absolute publicPath for file-loader to your local server

{
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|json|xml|ico)$/,
    loader: 'file-loader',
    query: {
        outputPath: 'assets/',
        publicPath: 'http://localhost:8080/', <- here
        emitFile: true
    }
}

it will change URL in your CSS from relative to absolute

[urikphytech]

Hi! I've tried every combination I could possibly think of and I can't understand why my images aren't found...
Here is my configuration:

output: {
    path: distPath,
    // Set proper base URL for serving resources
    publicPath: '/',
    // The output filename of the entry chunk, relative to `path`
    // [name] - Will be set per each key name in `entry`
    filename: 'bundle.[hash].js'
  },

.....

// SCSS
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader?root=' + encodeURIComponent(appPath),
          'postcss-loader',
          'sass-loader?includePaths[]=' + encodeURIComponent(appPath)
        ]
      },

{
        test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[hash].[ext]',
          publicPath: 'http://localhost:8080/', --> Added this because suggested here (in webpack 1 it worked without this
        },
      }

And i'm requiring the images via scss:
background-image: url('/assets/images/login/background_4.jpg');
Webpack output is:

Which is strange, because it used to be: '/assets/images/.....' without the '/Users/uriklar/' part

Any idea what i'm missing here??
Thanks!
Uri

[uriklar]

Ok, so my issue wasn't related (I'll delete my comment if maintainers prefer), but in case someone does get here with the same problem as me, what fixes it for me was adding the: context option to file-loader (i'm actually using url-loader) with the base url that assets need to be loaded from.

[xyzdata]

output.publicPath & output.path

https://github.com/gildata/RAIO/issues/276#issuecomment-354964693

[robbie-hinman]

It seems with css sourceMaps enabled, even with publicPath set, styles (including bg images) are not applied. But what is odd is that I can see them in the inspector. If I turn the style off and on again then the style is applied.

The below shows the page on initial load, showing a body background of paleturquoise in the dev console but the displayed background is white.

Unchecking and checking a style will then show the correct styles. If the dev console is not open you still have the issue.

repo here