CSS url path in additional chunk of Webpack can not be resolved correctly

Question

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

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

Matt Derrick · Accepted Answer · 2015-11-22 22:51:16Z

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: '/'
}

answered Nov 22, 2015 at 22:51

Matt Derrick

5,7242 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PinkyJie Over a year ago

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.

Collectives™ on Stack Overflow

CSS url path in additional chunk of Webpack can not be resolved correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related