feat: import sass:math utilities globally

src/styles/components/kanban.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 $bucket-background: $grey-100;
 $task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);

src/styles/theme/navigation.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .navbar {
 	z-index: 4 !important;
 

src/styles/theme/variables-derived.scss

@@ -1,4 +1,2 @@
-@use "sass:math";
-
 // Variables that are derived from bulma variables need to be included after them
 $mobile: math.div($tablet, 2);

src/styles/variables/_all.scss

@@ -1,6 +0,0 @@
-@import 'colors';
-@import 'shadows';
-@import 'variables';
-
-// the default values get overwritten by the definitions above
-@import "bulma/sass/utilities/_all";

src/styles/variables/_index.scss

@@ -0,0 +1,6 @@
+@import "colors";
+@import "shadows";
+@import "variables";
+
+// the default values get overwritten by the definitions above
+@import "bulma/sass/utilities/_all";

vite.config.js

@@ -5,12 +5,14 @@ const {visualizer} = require('rollup-plugin-visualizer')
 
 const pathSrc = path.resolve(__dirname, './src')
 
+// the @use rules have to be the first in the compiled stylesheets
+const SCSS_IMPORT_PREFIX = `@use "sass:math";
+@import "${pathSrc}/styles/variables";`
+
 module.exports = {
 	css: {
 		preprocessorOptions: {
-			scss: {
-				additionalData: `@import "${pathSrc}/styles/variables/_all.scss";`,
-			},
+			scss: { additionalData: SCSS_IMPORT_PREFIX },
 		},
 	},
 	plugins: [