web-dev-qa-db-fra.com

Comment inclure des fichiers CSS dans Vue 2

Je suis nouveau sur vue js et j'essaie d'apprendre cela. J'ai installé une nouvelle version de vue webpack dans mon système. Je reçois un css , js et les images de ce modèle de thème que je veux inclure dans le code HTML, alors j’ai essayé de l’ajouter dans index.html mais je peux voir des erreurs dans la console et les actifs ne sont pas ajoutés. Pendant ma recherche, je me suis rendu compte que je pouvais utiliser require dans main.js fichier. Mais je reçois l'erreur:

Après j'ai essayé dans mon main.js fichier:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 require('./assets/styles/vendor.css');
 require('./assets/styles/main.css');
 require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

Bien que j'aie essayé d'utiliser import pour l'utiliser mais j'ai quand même eu une erreur

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 import('./assets/styles/vendor.css')
 // require('./assets/styles/vendor.css');
 // require('./assets/styles/main.css');
 // require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

Voici la capture d'écran d'erreur: Error message

Aidez-moi dans cela.

webpackvue.jsvuejs2webpack-dev-server
22
Nitish Kumar

Vous pouvez importer le fichier css sur App.vue, à l'intérieur de la balise de style.

<style>
  @import './assets/styles/yourstyles.css';
</style>

Assurez-vous également que les bons chargeurs sont installés, si vous en avez besoin.

52
Geraldine Golong

Essayez d'utiliser le @ symbole avant la chaîne d’URL. Importez votre css de la manière suivante:

import Vue from 'vue'

require('@/assets/styles/main.css')

Dans votre fichier App.vue, vous pouvez importer un fichier CSS dans la balise style.

<template>
  <div>
  </div>
</template>

<style scoped src="@/assets/styles/mystyles.css">
</style>
9
Sir Waithaka

Comme vous pouvez le constater, la commande d'importation a fonctionné, mais affiche des erreurs car elle a tenté de localiser les ressources dans vendor.css sans les trouver.

Vous devez également télécharger la structure de votre projet et vous assurer qu’il n’ya pas de problème de chemin. En outre, vous pouvez inclure le fichier css dans le fichier index.html ou le modèle et le chargeur de composants Webpack l’extraient lorsqu’il est créé.

0
iamareebjamal