0

I use Code Spliting feature of webpack to lazy load my angular app. I want to put some css in additional chunks to let the app lazy load these styles, but I found the url path in these css can not be resolved correctly. See the attachments below: css-url-path-in-additional-chunk I have a background style for the h4 tag, but it can not be resolved correctly. At the same time, I have another img tag which use the same url on this page, the path is hard-coded in the src attribute, it can display correctly. url-in-html

====== update ======

My Webpack config is here: webpack.config.js, the styl file mentioned in the question is here: home-hero.styl, the header HTML file is here: header.jade.

Another thing needs noting is that when I right click the url link in the first picture and choose "open in new link", I got the full url is chrome-devtools://devtools/bundled/assets/images/logo.46e065707257b2930a699c7cdacd7e86.png, I think that's the main reason the picture can not be displayed.

PinkyJie
  • 817
  • 3
  • 8
  • 28

1 Answers1

2

Without seeing the directory structure of your application this is hard to diagnose but I assume your CSS file is not in the same directory as your HTML file therefore the path assets/images is actually incorrect for the background property in the CSS file, but correct for the <img> tag in HTML.

You want the URL to have a slash as the start e.g /assets/images so it doesn't matter where your CSS files reside, they will always resolve form the root.

Try using output.publicPath in your Webpack config.

output: {
    publicPath: '/'
}
Matt Derrick
  • 5,674
  • 2
  • 36
  • 52
  • Thanks @Matt for your explaination, I add the config file and realted file link in the quesiton. Could you help me to check if there is any errors? I also tried the `publicPath` parameter, but I encontered a weird problem, Angular give me a "unpr" error. – PinkyJie Nov 23 '15 at 15:20