refactor: move global styles to `main.css`; use only scoped styles in `App.vue`

- `base.css` contains CSS resets and variables
- `main.css` is the global styles of the app, to be imported by `main.js`
- `App.vue` only contains the styles for the root `App` component

diff --git a/template/base/src/assets/main.css b/template/base/src/assets/main.css
new file mode 100644 (file)
index 0000000..c133f91
--- /dev/null
+++ b/template/base/src/assets/main.css
@@ -0,0 +1,35 @@
+@import "./base.css";
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

diff --git a/template/code/default/src/App.vue b/template/code/default/src/App.vue
index 099c613b1ea07f5a3a97471c114c43e7b0a99904..45fbfd942c69353ba3989a0c7caca7f867e42a22 100644 (file)
--- a/template/code/default/src/App.vue
+++ b/template/code/default/src/App.vue
@@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue'
   </div>
 </template>
 
-<style>
-@import './assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
 }
@@ -39,45 +29,21 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 }
 </style>

diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue
index eac0e1bb4d3ddc66833b77813823bfba7eef4131..495b2c1e17a199656fd9d643a9756c4928b9c9a7 100644 (file)
--- a/template/code/router/src/App.vue
+++ b/template/code/router/src/App.vue
@@ -21,17 +21,7 @@ import HelloWorld from '@/components/HelloWorld.vue'
   </div>
 </template>
 
-<style>
-@import '@/assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
   max-height: 100vh;
@@ -42,19 +32,6 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 nav {
   width: 100%;
   font-size: 12px;
@@ -81,33 +58,22 @@ nav a:first-of-type {
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   nav {
     text-align: left;
     margin-left: -1rem;

diff --git a/template/code/typescript-default/src/App.vue b/template/code/typescript-default/src/App.vue
index 794bc4490d9638865ba47b24279655ba2fdf5615..70c911b5e7701839296bc56f70052da19b6793ab 100644 (file)
--- a/template/code/typescript-default/src/App.vue
+++ b/template/code/typescript-default/src/App.vue
@@ -19,17 +19,7 @@ import TheWelcome from './components/TheWelcome.vue'
   </div>
 </template>
 
-<style>
-@import './assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
 }
@@ -39,45 +29,21 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 }
 </style>

diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue
index 1a9747c3ade2efd2dfe6021689c858d72ee7f036..799239a8a963a415c2f884a7cd60ae38af0d7eb1 100644 (file)
--- a/template/code/typescript-router/src/App.vue
+++ b/template/code/typescript-router/src/App.vue
@@ -21,17 +21,7 @@ import HelloWorld from '@/components/HelloWorld.vue'
   </div>
 </template>
 
-<style>
-@import '@/assets/base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
+<style scoped>
 header {
   line-height: 1.5;
   max-height: 100vh;
@@ -42,19 +32,6 @@ header {
   margin: 0 auto 2rem;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 nav {
   width: 100%;
   font-size: 12px;
@@ -81,33 +58,22 @@ nav a:first-of-type {
 }
 
 @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-
   header {
     display: flex;
     place-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
   header .wrapper {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   nav {
     text-align: left;
     margin-left: -1rem;

diff --git a/template/entry/default/src/main.js b/template/entry/default/src/main.js
index df4337c98b73251e2b60c9a0f4edd60f219b92c3..c5da47dca536d6a1040a6dc399aa7ff358d4de57 100644 (file)
--- a/template/entry/default/src/main.js
+++ b/template/entry/default/src/main.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+import './assets/main.css'
+
 new Vue({
   render: (h) => h(App)
 }).$mount('#app')

diff --git a/template/entry/pinia/src/main.js b/template/entry/pinia/src/main.js
index 3b85a2cace83e8725cc59e54aac969ff0d1d7409..febe0dbe9ec0e5cf92c23ed20dde46a8ea5ce1c0 100644 (file)
--- a/template/entry/pinia/src/main.js
+++ b/template/entry/pinia/src/main.js
@@ -3,6 +3,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia'
 
 import App from './App.vue'
 
+import './assets/main.css'
+
 Vue.use(PiniaVuePlugin)
 
 new Vue({

diff --git a/template/entry/router-and-pinia/src/main.js b/template/entry/router-and-pinia/src/main.js
index 8fa41e80c4b022ade2c47d7465c78f711e0e6f98..e11e78e0b973b0fafd0585f209c79225e536f551 100644 (file)
--- a/template/entry/router-and-pinia/src/main.js
+++ b/template/entry/router-and-pinia/src/main.js
@@ -4,6 +4,8 @@ import { createPinia, PiniaVuePlugin } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import './assets/main.css'
+
 Vue.use(PiniaVuePlugin)
 
 new Vue({

diff --git a/template/entry/router/src/main.js b/template/entry/router/src/main.js
index 3129ea55395b4078d529a49fc5bd07950f776859..4919cf77138885e398ab9530e2a556d66b55b934 100644 (file)
--- a/template/entry/router/src/main.js
+++ b/template/entry/router/src/main.js
@@ -3,6 +3,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+import './assets/main.css'
+
 new Vue({
   router,
   render: (h) => h(App)