New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gryzzly opened this Issue Apr 16, 2015 · 27 comments

Comments

Projects
None yet
@gryzzly
Contributor

gryzzly commented Apr 16, 2015

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

This comment has been minimized.

Member

sokra commented Apr 20, 2015

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

This comment has been minimized.

clessg commented May 11, 2015

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

@Darkside73

This comment has been minimized.

Darkside73 commented Jan 6, 2016

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

@tizmagik

This comment has been minimized.

tizmagik commented Jan 14, 2016

Same question for https

@Darkside73

This comment has been minimized.

Darkside73 commented Jan 14, 2016

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

This comment has been minimized.

tizmagik commented Jan 14, 2016

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

This comment has been minimized.

pixelcure commented Jan 16, 2016

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

@tizmagik

This comment has been minimized.

tizmagik commented Jan 16, 2016

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

@valerymercury

This comment has been minimized.

valerymercury commented Jan 25, 2016

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

@creeperyang

This comment has been minimized.

creeperyang commented Jan 31, 2016

@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

This comment has been minimized.

valerymercury commented Jan 31, 2016

@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

This comment has been minimized.

tizmagik commented Feb 1, 2016

@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

This comment has been minimized.

davidhouweling commented Feb 10, 2016

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

This comment has been minimized.

tizmagik commented Mar 2, 2016

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

Has anyone been able to find another solution?

@schickling

This comment has been minimized.

schickling commented Mar 5, 2016

Facing the same problem at the moment...

@unimonkiez

This comment has been minimized.

unimonkiez commented Mar 29, 2016

Me too

@Strate

This comment has been minimized.

Strate commented Mar 30, 2016

#96

@mbritton

This comment has been minimized.

mbritton commented Aug 15, 2016

+1

@simshanith

This comment has been minimized.

simshanith commented Oct 14, 2016

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.

mickeahlinder referenced this issue in 1337programming/webpack-browser-plugin Dec 6, 2016

@Pines-Cheng

This comment has been minimized.

Pines-Cheng commented Jan 14, 2017

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

@muralim4242

This comment has been minimized.

muralim4242 commented Jan 27, 2017

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

@olieidel

This comment has been minimized.

olieidel commented Apr 1, 2017

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!

@lysenkobv

This comment has been minimized.

lysenkobv commented Apr 6, 2017

@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

This comment has been minimized.

urikphytech commented Jun 3, 2017

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:
screen shot 2017-06-03 at 7 58 07

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

This comment has been minimized.

uriklar commented Jun 4, 2017

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

This comment has been minimized.

xyzdata commented Jan 3, 2018

output.publicPath & output.path

xyz-data/RAIO#276 (comment)

@robbie-hinman

This comment has been minimized.

robbie-hinman commented Jan 16, 2018

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.
image
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment