Vue.js + Webpack-Dev-Server CSS URL's

Question

I'm integrating Vue.js into an multi-page PHP application ( Not an SPA ) I'm using the vue-cli webpack template. Only modification i've made to the default template is adding multiple entry points (for generating multiple scripts for multiple pages)

For my development environment, I use docker-compose and serve the pages VIA my lamp stack and run the Webpack-dev-server on a separate instance and link the JS files generated by webpack-dev-server.

(* diagram of my setup )

My issue is getting the CSS url's from the webpack-dev-server instance. I'm able to link in the JS files a-ok, and the 'build' outputs both the JS & CSS files perfectly. I've tried adding the ExtractTextPlugin with the filename param in my dev config, but still not able to source the CSS file from the webpack-dev instance.

Any advice would be much appreciated as I'm just getting into webpack

Thanks
-J

the 'build' outputs both the JS & CSS files perfectly you mean the problem is not linking the css generated to your html? — Dencio
– Dencio, Commented Feb 27, 2018 at 7:55
I'm using the default webpack config. github.com/vuejs-templates/webpack . Correct, the build separates the JS and CSS, howerver, when running the webpack-dev-server ( for hot-reload ) The dev-server exposed the JS link ( IE 0.0.0.0:8080/[entry-point].js ) however I'm unable to link to the CSS files using the same convention... I tried using the same ExtractTextPlugin in the 'build' but still unable to reach the CSS files.. — John
– John, Commented Feb 27, 2018 at 8:15

John · Accepted Answer · 2018-02-27 19:20:47Z

2

Figured out the configuration

config/vue-loader.conf.js has a property extract when set to true adds the ExtractTextPlugin as the last loader to output a file. Set this to true for your dev.conf

Then, in your dev configuration, add the ExtractTextPlugin to your plugin stack and add the filename convention you want to source your file as.

NOTE: you will also need to configure the public path on the devServer config to be your containers {host}:{port}

I've forked the source template and added the configuration for reference/use

https://github.com/ibejohn818/vuejs-webpack-docker

Hope this helps somebody as I can see this as a common use-case and was unable to find any exact reference after days of googling.

answered Feb 27, 2018 at 19:20

John

9756 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Vue.js + Webpack-Dev-Server CSS URL's

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related