![How to contribute to the Flutter engine [Windows]](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6l3gn3x9ffod81mk92vm.png)
Vue3: How to style components (global, scoped and modules)
Ler em pt-BR In the past few years using Vue as my favorite framework, I’ve come across many people who believed that the only way to style a component was by using CSS inside the style tag within the .vue file itself. Some people even reported disliking Vue solely because of this! So, to clarify this somewhat "cloudy" topic, come along and let’s explore the different approaches to styling Vue components. Table of contents Global styles Scoped styles CSS Modules When to use each one Global styles As the name suggests, global styles are available throughout the entire application and are usually imported in the main.ts file inside your project’s /src folder. When you start a Vue application, a global file is already configured and imported: import './assets/main.css' You can create as many global files as you want and import them directly in your main.ts. Alternatively, you can import your global styles into a single .css file (or .scss, .less, etc.) and then import that single file into your 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' ❓ "But don’t I need to have a style tag in my .vue file?"
In the past few years using Vue as my favorite framework, I’ve come across many people who believed that the only way to style a component was by using CSS inside the style tag within the .vue file itself. Some people even reported disliking Vue solely because of this!
So, to clarify this somewhat "cloudy" topic, come along and let’s explore the different approaches to styling Vue components.
Table of contents
Global styles
Scoped styles
CSS Modules
When to use each one
Global styles
As the name suggests, global styles are available throughout the entire application and are usually imported in the main.ts file inside your project’s /src folder.
When you start a Vue application, a global file is already configured and imported:
import './assets/main.css'
You can create as many global files as you want and import them directly in your main.ts. Alternatively, you can import your global styles into a single .css file (or .scss, .less, etc.) and then import that single file into your 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'
❓ "But don’t I need to have a style tag in my .vue file?"
