stop using relative imports for most of css

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -345,8 +345,8 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 
 <style lang="scss" scoped module>
 @import '../res-common/variables';

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -120,5 +120,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue

@@ -118,5 +118,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -453,8 +453,8 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
 <style scoped>
 .button-hover:hover {
   color: #fa6;

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -240,5 +240,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -245,5 +245,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -152,5 +152,5 @@ export default {
 </script>
 
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -550,8 +550,8 @@ export default({
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 <style lang="scss" scoped>
 p {
   font-size: 1rem;

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -224,8 +224,9 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
+
 <style lang="scss" scoped>
 .justify-center {
   justify-content: center;

src/csui/src/PlayerUiPanels/ResetBackupPanel.vue

@@ -26,5 +26,5 @@ export default {
 }
 </script>
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -143,8 +143,9 @@ export default {
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
+
 <style lang="scss" scoped>
 .justify-center {
   justify-content: center;

src/csui/src/components/EditShortcutButton.vue

@@ -172,7 +172,7 @@ export default {
 
 </script>
 
-<style lang="scss" src="../res-common/common.scss" scoped></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
 <style lang="scss" scoped>
 @import "../res-common/variables";
 

src/csui/src/components/TriggerZoneEditor.vue

@@ -342,8 +342,8 @@ export default {
 
 </script>
 
-<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
 <style lang="scss" scoped>
 .active-trigger-area {
   background-image: url('/res/img/grid_512.webp');

webpack.config.js

@@ -29,6 +29,10 @@ const config = {
   devtool: "source-map",
 
   resolve: {
+    alias: {
+      '@src': path.resolve(__dirname, 'src'),
+      '@csui': path.resolve(__dirname, 'src/csui'),
+    },
     // maybe we'll move vue stuff to TS some day, but today is not the day
     extensions: [
       '.ts', '.tsx',