search

11ty / eleventy-plugin-vue

Use Vue.js templates and Vue.js single file components in Eleventy.
195 stars 11 forks source link

Styles not included when there is only one component. #10

Closed andybluntish closed 3 years ago

andybluntish commented 3 years ago

After following along with the basic setup described in the blog post, everything was working great. When I setup a custom input directory in the .eleventy.js config (and moved the files) the component styles stopped working. The page and component rendered just fine, but only the page styles were being output from getVueComponentCssForPage, and styles defined in the component were missing.

I found that when I added a second component file to the _includes directory, the styles came back. I put some logging in EleventyVue.js and noticed that entry.imports changed when I added the second component file, even though I wasn’t importing it into the page.

Logging entry.imports for my index.vue page:

with one file (component styles not working):

[ 'room-with-a-059e8199.js' ]

with two files (component styles are working):

[ 'normalize-component-d98a7a19.js', 'room-with-a.js' ]

It appears that the normalize-component file is not being created when there is only one include file component (confirmed by looking in the cache directory). Also, in the broken case, the hash is suspiciously being appended to the component file name. I’m not familiar enough with this to know what normalize-component really does, but from what I’ve observed it certainly seems connected.

zachleat commented 3 years ago

Hey @andybluntish sorry for the late reply here. I just pushed 0.3.0 which fixes this (I believe)

Can you retest?

zachleat commented 3 years ago

I pushed a test confirming that this works in 0.3.0. Going to close for now but please reopen if you see issues!