css - style - vue2 class

La mejor manera de tener css global en Vuejs

Question

¿Cuál es la mejor manera de tener un archivo css global en Vuejs para todos los componentes? (Css predeterminado como color bg, estilo de botones, etc.)

• importar un archivo css en el index.html
• hacer @import en componente principal
• ponga todo el css en el componente principal (pero eso sería un archivo enorme)

Answer 1

Descubrí que la mejor manera es crear un nuevo archivo en la carpeta de activos , creé como global.css pero puede nombrar lo que quiera. Luego, importe este archivo global.css en main.js

Nota: si utiliza este enfoque, también puede crear varios archivos si cree que global.css se está volviendo realmente grande, simplemente importe todos esos archivos en main.js.

@ / asset / 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'')

Answer 2

Importe css en su index.html, pero si está usando un paquete web, solo puede importar sus hojas de estilo en su configuración js principal y todos sus componentes obtendrán el css.

Answer 3

También puede hacer algo como esto: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/

Mis carpetas están mayormente estructuradas de esta manera:

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

Esto también funciona con css normal.