Comment inclure des fichiers css en Vue 2

Je suis nouveau à la vue js et d'essayer de l'apprendre. J'ai installé une nouvelle version de la vue webpack dans mon système. Je vais avoir un css, js et les images de ce thème modèle que je veux inclure dans le code HTML, donc j'ai essayé de l'ajouter dans index.html mais je peux voir les erreurs dans la console et les actifs ne sont pas ajoutés. Alors j'ai cherché, j'ai appris que je peux utiliser require dans main.js fichier. Mais j'obtiens le message d'erreur:

La suite, 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 }
 })

Alors j'ai essayé en utilisant l'importation de l'utiliser mais je suis d'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 l'erreur capture d'écran:
Comment inclure des fichiers css en Vue 2

M'aider dans ce.

Où avez-vous installé vue webpack? D'où le thème de modèle proviennent de? Et quel est l'éditeur que vous utilisez ?
J'ai installé la vue à travers vue-cli nous sommes d'avoir une html template qui ont des feuilles de style en css. et je travaille sur WebStorm éditeur

OriginalL'auteur Nitish Kumar | 2017-05-04

  1. 44

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

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

    Aussi, assurez-vous que vous avez le droit chargeurs installé, si vous en avez besoin.

    Cela fonctionne parfaitement. J'avais aussi fait le travail de l'importation de styles dans index.js fichier comme ceci: import '@/assets/css/styles.css. La Production a généré le fichier css qui semble être la même. Je me demande quelle solution est la mieux...
    Si vous importez le fichier css à l'intérieur d'une balise style dans une .vue, vous pouvez le faire d'étendue, et que d'appliquer les styles dans le composant spécifique. C'est une autre chose que vous pouvez faire, mais je ne suis pas tout à fait sûr de la solution la meilleure.

    OriginalL'auteur Geraldine Golong

  2. 5

    Essayez d'utiliser le @ symbole avant de la chaîne d'url. Importer votre css de la façon suivante:

    import Vue from 'vue'

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

    Dans votre Application.vue de fichier, vous pouvez le faire pour importer un fichier css dans la balise style

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

<style scoped src="@/assets/styles/mystyles.css">
</style>
    J'aime cela parce que vous n'avez pas besoin d'installer les chargeurs...

    OriginalL'auteur Sir Waithaka

  3. 0

    Comme vous pouvez le voir, la commande d'importation a fait un travail mais montre des erreurs parce qu'il a essayé de localiser les ressources de leur fournisseur.css et je ne pouvais pas les trouver

    Vous devez également télécharger votre structure de projet et de s'assurer qu'il n'ya pas de problèmes de chemin d'accès. En outre, vous pouvez inclure le fichier css dans le index.html ou le modèle de Composant et webpack chargeur pourrait extraire lors de la construction

    J'ai essayé de les placer dans index.html mais il n'est pas de trouver, j'ai essayé <link rel='stylesheet' href="./src/assets/styles/vendor.css">, mais est incapable de trouver. J'ai essayé ./assets/styles/vendor.css je ne suis pas en mesure d'obtenir

    OriginalL'auteur iamareebjamal