hasty dagger
I'm stuck with useHead and style in particular. The documentation states it takes an array of strings, so this should work within app.vue? However it's the styles are not being applied.
<script setup>
useHead({
style: [
'@/assets/styles/main.css'
]
})
</script>
or rather:
{ href: '@/assets/styles/main.css'
}]```
mild plume
try
useHead({
link: [ { rel: 'stylesheet', href: '@/assets/styles/main.css'} ]
})
Unfortunately, that produces an error: GET http://localhost:3000/@/assets/styles/main.css net::ERR_ABORTED 404 (Page not found: /@/assets/styles/main.css)
mild plume
how aabout moving it to public ?
hasty dagger
If I define the stylesheetin nuxt.config, using
css: ['@/assets/styles/main.css'],
then within the page I get: <link rel="stylesheet" href="/_nuxt/assets/styles/main.css">. So that's what I need to replicated within useHead. Except hard coding _nuxt isn't going to work in production. For some reason, it's not transforming the alias @
mild plume
That's because nuxt won't serve the assets directory
hasty dagger
I'll be using postcss with imports, etc. and need to deubug with Vite's CSS souremaps so adding it to public won't cut it.
mild plume
try to move it /public/main.css and
useHead({
link: [ { rel: 'stylesheet', href: '/main.css'} ]
})
While that works from public, I won't be able to use public since nothing in there gets processed, right?
wide python
Yup should be right sadly
But I don’t get why you absolutely need to use it inside useHead if the config CSS array works.
Is there a specific reason?
mild plume
Or you could directly import it into the <style lang="scss"> tag
wide python
Was wondering if it’s a thing. Do path aliases (@/~) work here?
hasty dagger
@wide python For configuration purposes, I'd prefer in app.vue instead of nuxt.config. I have other configurations within useHead, and rather not define configurations in multiple places of my project.
Path aliases don't seem to work
hasty dagger
I appreciate your help @wide python and @mild plume
uncut ruin
Nuxt won't process any aliases unless you put them in nuxt.config.ts css prop