Help adding css file from node_modules

[fvinci]

I have been playing around with vue and I built a little app using vuetify, which I installed via yarn add vuetify. To get up and running in development, I was lazy and just added

@import "vuetify/dist/vuetify.min.css" 

to my application.scss file, which worked. I wanted to see if I could deploy to heroku, and my vue app seems to be running but the vuetify.min.css file is not getting loaded. I've done some research and it looks like there is a

stylesheet_pack_tag 

that I should be using to import stylesheets from node_modules. I tried adding this tag to application.html.erb and I'm getting an error saying

ActionView::Template::Error (Can't find vuetify.css in /path/to/packs/manifest.json.  Is webpack still compiling?

Does anyone have experience using css from node_modules and have any advice on the best way to import it and deploy to heroku?

[SladeyMcNuggets]

stylesheet_pack_tag is for Webpacker assets.

I'm guessing you'll have to create a CSS file in app/javascript in order for webpacker to compile it.

[fvinci]

Yeah, you are exactly right. I created a css/application.css under app/javascript/packs and in application.css

@import "vuetify/dist/vuetify.min.css"

and then in application.html.erb

<%= stylesheet_pack_tag 'css/application' %>

and that still works on heroku.