Why is a vendor CSS chunk get built only in production (not in my development environment)?

user_8496705 0
Viewed 129

I have a multi page application using webpack's entry points.

When deploying the page via Netlify, this vendors chunk stylesheet is outputting to the page:

<link href="/css/chunk-vendors.87c094b1.css" rel="preload" as="style">

However, when I build and serve the files on my development environment, this asset is not present on the page.

yarn build
serve dist -p 8080

Additionally, it's batching up all the styles from all the vendors into this chunk, regardless of whether or not the styles are used in a particular entry point. Ideally, it would only include styles used in that entry point.

I haven't defined any config.optimization.splitChunks in vue.config.js.

I'm not sure if I'm missing something obvious here. Let me know if I should include more information (e.g. particular config settings).

vue-cli webpack css
1 Answers

Webpack doesn't create the css files in dev mode by default. To get around this you should add to your vue.config.js to your module exports

css: {
   extract: true,
},
user_103787190
Related