feat: provide global variables in all components

src/components/input/editor.vue

@@ -457,7 +457,6 @@ export default {
 <style lang="scss">
 @import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
 @import '../../../node_modules/easymde/dist/easymde.min.css';
-@import '../../styles/theme/variables/all';
 
 .editor {
 	.clear {

src/components/tasks/partials/priorityLabel.vue

@@ -44,8 +44,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/theme/variables/all';
-
 .priority-label {
 	display: inline-flex;
 	align-items: center;

src/components/tasks/partials/relatedTasks.vue

@@ -269,8 +269,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/styles/theme/variables/all';
-
 .add-task-relation-button {
 	margin-top: -3rem;
 

src/components/user/avatar-settings.vue

@@ -146,8 +146,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../styles/theme/variables/all';
-
 .cropper {
 	height: 80vh;
 	background: transparent;

src/styles/theme/_all.scss

@@ -1,4 +1,3 @@
-@import 'variables/all';
 @import 'theme';
 
 @import 'content';

vite.config.js

@@ -3,7 +3,16 @@ const {VitePWA} = require('vite-plugin-pwa')
 const path = require('path')
 const {visualizer} = require('rollup-plugin-visualizer')
 
+const pathSrc = path.resolve(__dirname, './src')
+
 module.exports = {
+	css: {
+		preprocessorOptions: {
+			scss: {
+				additionalData: `@import "${pathSrc}/styles/variables/_all.scss";`,
+			},
+		},
+	},
 	plugins: [
 		createVuePlugin(),
 		VitePWA({