diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 87b080d2ca..64aea999fc 100644
--- a/src/components/input/editor.vue
+++ b/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 {
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index c7910ab8a5..8b03fc5be9 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/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;
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index ea383844fd..5dabd54f86 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/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;
 
diff --git a/src/components/user/avatar-settings.vue b/src/components/user/avatar-settings.vue
index 95ca46f7e6..02260ef15a 100644
--- a/src/components/user/avatar-settings.vue
+++ b/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;
diff --git a/src/styles/theme/_all.scss b/src/styles/theme/_all.scss
index eaec17757c..1afff997d0 100644
--- a/src/styles/theme/_all.scss
+++ b/src/styles/theme/_all.scss
@@ -1,4 +1,3 @@
-@import 'variables/all';
 @import 'theme';
 
 @import 'content';
diff --git a/src/styles/theme/variables/_all.scss b/src/styles/variables/_all.scss
similarity index 100%
rename from src/styles/theme/variables/_all.scss
rename to src/styles/variables/_all.scss
diff --git a/src/styles/theme/variables/colors.scss b/src/styles/variables/colors.scss
similarity index 100%
rename from src/styles/theme/variables/colors.scss
rename to src/styles/variables/colors.scss
diff --git a/src/styles/theme/variables/shadows.scss b/src/styles/variables/shadows.scss
similarity index 100%
rename from src/styles/theme/variables/shadows.scss
rename to src/styles/variables/shadows.scss
diff --git a/src/styles/theme/variables/variables.scss b/src/styles/variables/variables.scss
similarity index 100%
rename from src/styles/theme/variables/variables.scss
rename to src/styles/variables/variables.scss
diff --git a/vite.config.js b/vite.config.js
index d80c6d90bd..459f494ddf 100644
--- a/vite.config.js
+++ b/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({