web-dev-qa-db-fra.com

Comment importer le fichier CSS du dossier d'actifs dans NUXT.JS

<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>

Importation de CSS comme ci-dessus Résultats dans cette erreur

vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)

N'y a-t-il vraiment pas d'autre sens chargement de CSS autre que de mettre l'ensemble du CSS dans le modèle?

cssvue.jsnuxt.js
4
obliviousfella

La première chose à savoir que vous devez savoir est, vous ne pouvez pas déclarer une tête HTML à l'intérieur d'un endroit, ni dans la vôtre tamate, ni dans les vôtres, ni dans les pages de vôtres, ni dans nulle part.

Le bon endroit est à l'intérieur de votre nuxt.config.js, dans ce fichier, vous avez une propriété appelée tête et à l'intérieur de cette tête, vous configurerez vos importations. Une autre chose est que vous n'utilisez pas de balises HTML pour cela, vous utiliserez un schéma JSON.

jetez un coup d'œil https://nuxtjs.org/guide/configuration Pour des explications plus détaillées.

vous doutez maintenant, si vous avez besoin d'importer votre CSS au niveau mondial, vous pouvez déclarer une nouvelle propriété appelée CSS dans votre NUXT.CONFIG.JS, une chose comme celle-ci:

...  
css: [
  '~/assets/style/app.styl',
  '~/assets/style/main.css'
],
...

Une autre façon, est d'importer votre CSS directement dans votre composant, car vous pouvez faire une chose comme celle-ci:

    <style scoped>
    @import '~/assets/style/main.css';
    </style>
OR
    <style scoped src="@/assets/styles/mystyles.css">
    </style>

Dans NUXT, vous aurez également besoin d'un chargeur CSS installé dans votre application également, alors vous avez donc eu l'introduit un "stylet" et "Stylus-loader" dans votre application.

0
Henrique Van Klaveren

Vous pouvez apporter vos fichiers à utiliser la méthode de la tête comme si:

head () {
return {
  link: [
    { rel: 'stylesheet', href: '/style-light.css' },
    { rel: 'stylesheet', href: '/login-light.css' }
  ]
}

}

Vous devez également déplacer ces fichiers CSS dans le dossier statique. Voir cette discussion sur le Vue https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498

0
MailboxArsonist