Hands-On Full-Stack Web Development with ASP.NET Core

Global styles

While you could include the global app styles as part of the app component's non-scoped styles, Vue CLI-based projects support importing CSS files in code:

1. Create a new file /src/styles.css
2. Write the following CSS:

html {  box-sizing: border-box;  font-size: 62.5%;  /* =10px */} *, *:before, *:after {  box-sizing: inherit;} html, body {  margin: 0;  padding: 0;  width: 100%;  height: 100%;} body {  font-size: 1.4rem;}.hidden {  display: none !important;} .maxHeight {  height: 100%;} .maxWidth {  width: 100%;} .flex {  display: flex;} .flex-justify-content--center {  justify-content: center;} .flex-align-items--center {  align-items: center;}

3. Import the styles in main.js, as shown in the following code:

import Vue from 'vue';import App ...