Vue3: Como estilizar componentes (global, scoped e modules)
Nesses últimos anos usando Vue como meu framework favorito, acabei esbarrando em várias pessoas que acreditavam que a única forma de se estilizar um componente seria utilizando CSS dentro da tag do próprio arquivo .vue. Algumas pessoas até relataram não gostar de Vue unicamente por esse motivo! Então, pra esclarecer um pouco mais esse assunto "nebuloso", vem comigo ver as diferentes abordagens de estilização de componentes Vue. Sumário Estilos globais Estilos escopados com scoped Estilos escopados com CSS Modules Quando usar cada um? Estilos globais Como o próprio nome diz, os estilos globais ficam disponíveis pra toda a aplicação e normalmente são importados no arquivo main.ts na pasta /src do seu projeto. Quando você inicia uma aplicação Vue, um arquivo global já vem configurado e importado: import './assets/main.css' Você pode criar quantos arquivos globais quiser e importá-los diretamente no seu main.ts. Ou você pode importar seus arquivos globais em um único arquivo .css (ou .scss, .less, etc.) e importar esse único arquivo no seu main.ts: // assets/styles.scss @import "base/reset"; @import "base/variables"; @import "base/typography"; @import "components/buttons"; @import "components/table"; @import "pages/home"; // main.ts import './assets/styles.scss' ❓ "Mas eu não preciso ter uma tag no meu arquivo .vue?
