🐛 BUG: CSS from Vue single file component not consistently injected into HTML files #2575
Comments
|
Have the same issue 🙈 |
|
FYI: I built myself a post-build script as a workaround. Does the job. import fs from 'fs'
import path from 'path'
fixCssInjections()
function fixCssInjections () {
const dir = readdirRecursive('dist')
const cssToInject = dir.filter(file => file.includes('vue_vue_type_style_index_0_scoped_true_lang'))
const htmlFiles = dir.filter(file => file.endsWith('index.html'))
for (const htmlFile of htmlFiles) {
console.info(`Fix CSS injection for ${htmlFile}`)
injectCss(htmlFile, cssToInject)
}
}
export function injectCss (file, cssPaths) {
const contents = fs.readFileSync(file, { encoding: 'utf8', flag:'r' })
const injectStr = cssPaths.map(cssPath => {
const relPath = path.relative(file, cssPath)
return `<link rel="stylesheet" href="${relPath}">`
})
const contentParts = contents.split('<head>')
const newContent = contentParts[0] + '<head>' + injectStr.join('') + contentParts[1]
fs.writeFileSync(file, newContent, { encoding: 'utf8' })
}
function readdirRecursive (filepath) {
// Something from stackoverflow 😅
} |
|
Closing this out since there isn't a reproduction to dig deeper into, but please open another issue if you manage to reproduce this in one of the astro.new starters and we'll investigate this one further 👍 |
|
In my case it's consistently the I'm also using Vue 3 script setup. Also working fine when running Packages: I created this issue: #6827 |
|
same here, vue3, use SFC file in astro 2.3.0, some component style won't work |
|
same for me. rolling back to astro 2.1.3 fixes it |
What version of
astroare you using?0.22.20
What package manager are you using?
npm
What operating system are you using?
Mac, Linux
Describe the Bug
Problem
Astro injects CSS from Vue single file components into HTML files like this:
The global CSS files (in this case just one main file) is consistently injected. But the CSS from .vue files is sometimes omitted. "Sometimes" you say? Yes, I have been running tests for about 4 hours now to find the cause and I could not find conditions to consistently reproduce the problem. At this point I am assuming a race condition.
Observations
astro dev<link>tags are injected or omitted<link>tags are omitted from some generated HTML files, and injected into othersastro build(i.e.SiteLogo.vue_vue_type_style_index_0_scoped_true_lang.dbb54b6d.css)astro buildon my Mac (M1 Pro), about once every 3 builds the<link>tags are omitted from HTML filesastro buildon Netlify, the<link>tags are omitted almost alwaysSorry, I would love to create a reproducible example. But I can't. I didn't find consistent conditions 😕
Link to Minimal Reproducible Example
The text was updated successfully, but these errors were encountered: