web-dev-qa-db-fra.com

Le meilleur moyen d'avoir un css global dans Vuejs

Quel est le meilleur moyen d’avoir un fichier css global dans Vuejs pour tous les composants? (Css par défaut comme couleur bg, style des boutons, etc.)

  • importer un fichier css dans le fichier index.html
  • do @import dans le composant principal
  • mettre tous les css dans le composant principal (mais ce serait un fichier énorme)
cssimportvue.js
31
Jordy

Importez css dans votre index.html, mais si vous utilisez webpack, vous pouvez simplement importer vos feuilles de style dans votre configuration principale js et tous vos composants obtiendront le css.

49
highFlyingSmurfs

J'ai trouvé le meilleur moyen de créer un nouveau fichier dans le dossier des actifs, que j'ai créé en tant que global.css, Mais vous pouvez nommer ce que vous voulez. Ensuite, importez ce fichier global.css Dans le fichier main.js.

Remarque: en utilisant cette approche, vous pouvez également créer plusieurs fichiers si vous pensez que le fichier global.css devient vraiment volumineux, puis importez simplement tous ces fichiers dans le fichier main.js.

@\assets\global.css

/* move the buttons to the right */
.buttons-align-right {
  justify-content: flex-end;
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes'

Vue.config.productionTip = false

// Importing the global css file
import "@/assets/global.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
6
Coder Absolute

Vous pouvez également faire quelque chose comme ceci: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-appapp/ =

Mes dossiers sont principalement structurés comme ceci:

 - src
   - assets
     - _global.scss
     - _colors.scss
     - _fonts.scss
     - _paragraphs
     - index.scss // <-- import all other scss files.

Cela fonctionne aussi avec les CSS normaux.

2
PeeJee