<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?
The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
https://v2.nuxt.com/docs/configuration-glossary/configuration-css/
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
...
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
In Nuxt2, you will need a CSS loader installed in your application too, so have sure you had installed a "stylus" and "stylus-loader" in your app.
[edit] add nuxt3
https://nuxt.com/docs/getting-started/styling#the-css-property
In nuxt3 you can import inside the nuxt-config.ts outside of head property, directly in css property:
export default defineNuxtConfig({
...
css: [`assets/styles/main.scss`],
...
})
In Nuxt3 with SCSS, you will need "sass" and "sass-loader" pakages, so have sure you have it installed before.
npm i D sass sass-loader
Another way, is import your css/scss directly inside your component or pages. This will work in both versions Nuxt2 and Nuxt3. For this you can do some thing like this:
<style lang="scss" scoped>
@import "./myCustomCss.css";
</style>
OR
<style scoped src="./myCustomCss.css">
</style>
try to import your CSS files in script like this :
<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";
///
</script>
You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498
headelement per page. It cannot reside in thebody. Aside from that, it would maybe work, but the CSS does not exist at that specified path.