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)
@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.
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.
Adding this
to
app/views/layouts/application.html.erb
seems to work for webpacker/rails/single file components/etcfyi @olingern 😃
@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 removedscoped
(I didnt havelang='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@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 - at first glance it looks like your using an npm package
vue-event-calander
which requires CSS import. Try addingimport 'vue-event-calendar/dist/style.css'
to your packs/meeting_calendar.js file.