Menu
<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?
500
asked Feb 18 '20 10:02
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. So, inside nuxt.
From nuxt documentation: Inside your vue templates, if you need to link to your assets directory use ~/assets/your_image. png with a slash before assets.
In order to use Vue plugins we need to create a Nuxt plugin and we do this by creating a . js file in the /plugins folder. We then paste in the code that we need to use the plugin. We import Vue and VTooltip and then tell Vue to use the VTooltip.
It's available under the "head. boddyAttrs. class" attribute and you can refer below.
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. So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use the static directory for static assets.
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. The correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside this head you will configure your imports.
By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use the static directory for static assets. vue-loader automatically processes your style and template files with css-loader and the Vue template compiler out of the box.
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.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
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.
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'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
@import '~/assets/style/main.css';
</style>
OR
<style scoped src="@/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.
188
try to impot your css files in script like this :
<script>
import "@/assets/css/style-light.css";
import "@/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to @
31
answered Nov 15 '22 06:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With