webpacker: Webpacker:Vue component styles do not work

First of all, the path to app.vue is incorrect in app/javascript/packs/hello_vue.js for the commented out section below (needs an extra dot). It also doesn’t seem to work when the path is corrected. Here’s an example.

I was able to get the components to work here, but none of the component styles render. I had to put them in app/assets/stylesheets/

Am I doing something wrong or is this a bug?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 21 (9 by maintainers)

Most upvoted comments

@sdellis, @ytbryan - I could submit a pr to improve documentation.

ex.

Using CSS with vue-loader

Vue templates require loading the stylesheet in your application in order for CSS to work. This is in addition to loading the JavaScript file for the entry point. Loading the stylesheet will also load the CSS for any nested components.

<%= stylesheet_pack_tag 'hello_vue' %> 
<%= javascript_pack_tag 'hello_vue' %>

+44

rlafranchi on Nov 4, 2017

I just stumbled across this.

It doesn’t make a lot of sense for single file components to have to include to tags for webpacker a stylesheet + javascript file.

+19

olingern on May 7, 2018

Adding this

...
<head>
  ...
  <%= stylesheet_pack_tag 'application' %> 
  ...
</head>
...

to app/views/layouts/application.html.erb seems to work for webpacker/rails/single file components/etc

fyi @olingern 😃

+12

alecjacobs on Jan 1, 2019

@sdellis @ytbryan This is being an issue for me, I had to do in-line styling for now which is killing me. I have the stylesheet_pack_tag in and also removed scoped (I didnt have lang='css') but all this still didnt do the trick for me. Can this be re-open? Im on web packer 3.0.2, Vue 2.5.3, vue-loader 13.5.0 and vue-template-compiler 2.5.3

RobPando on Nov 11, 2017

@gauravtiwari It didn’t make sense to me that the component ignored custom classes (works with inline styling as it is now), but I guess it does. My bad completely. Thanks for pointing this out regardless being a non webpacker issue, I appreciate the help, you guys are awesome.

RobPando on Nov 15, 2017

@RobPando - at first glance it looks like your using an npm package vue-event-calander which requires CSS import. Try adding import 'vue-event-calendar/dist/style.css' to your packs/meeting_calendar.js file.

rlafranchi on Nov 14, 2017