Here are two suggestions until a more suitable solution is found:
1. Include Code in App.vue File
If the code is minimal, consider placing it in your App.vue file
As mentioned:
"I could write the CSS in the tags of a component but to me this only makes sense if the CSS is only used for this specific component."
CSS within the <style></style> tags in any .vue files in your project will be applied globally.
The <style></style> tag affects the entire project unless you use scoped.
<style scoped>
body {
background: green; /* This won't affect your main <body> tag unless you actually have a `<body>` inside the `<template>` of that file */
}
</style>
2. Import Standalone CSS File (Updated and Simplified)
Suggested by @Fabjan in the comments.
Import the .css file in your main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/lib/css/reset.css' // my personal reset file
import './assets/lib/css/myMain.css' // global stylesheet
Ensure the import occurs before launching your app with new Vue({})
(3. My Previous Response:)
Create a styles.vue file and place all global styles inside <styles></styles> without scoped (this method worked for me)
In your main.js file, include the following:
import GlobalStyles from "./assets/lib/css/styles.vue"
Vue.use(GlobalStyles)
Make sure the styles.vue file contains at least one tag inside for proper importation.
<template>
<div class="empty">
</div>
</template>
<style>
body {
background: red;
/* Additional global CSS code goes here */
}
</style>
This method may seem crude, but it was effective for me at the moment.
I hope these suggestions prove helpful, and I welcome any feedback or alternative solutions from others.