Use resolves

build/webpack.config.js

@@ -19,7 +19,7 @@ module.exports = (env, argv) => {
 		devtool: isDev ? 'inline-source-map' : false,
 		watch: isDev,
 		entry: {
-			app: path.resolve(SRC, 'scripts', 'app.js')
+			app: path.resolve(SRC, 'app.js')
 		},
 		output: {
 			path: DIST,
@@ -93,9 +93,11 @@ module.exports = (env, argv) => {
 			new VueLoaderPlugin()
 		],
 		resolve: {
-			extensions: ['.js', '.vue', '...'],
+			extensions: ['.vue', '.scss', '...'],
 			alias: {
-				'@scripts': path.resolve(SRC, 'scripts')
+				'@components': path.resolve(SRC, 'components'),
+				'@scripts': path.resolve(SRC, 'scripts'),
+				'@styles': path.resolve(SRC, 'styles')
 			}
 		}
 	};

src/Spot.vue

@@ -1,7 +1,7 @@
 <script>
-import Project from './components/project.vue';
+import Project from '@components/project';
-import Admin from './components/admin.vue';
+import Admin from '@components/admin';
-import Upload from './components/upload.vue';
+import Upload from '@components/upload';
 
 const aoRoutes = {
 	'project': Project,

src/app.js

@@ -1,15 +1,15 @@
 //Librairies
-import Api from './api.js';
+import Api from '@scripts/api';
-import Lang from './lang.js';
+import Lang from '@scripts/lang';
-import Projects from './projects.js';
+import Projects from '@scripts/projects';
-import User from './user.js';
+import User from '@scripts/user';
 import { createApp } from 'vue';
 
 //Main template
-import Spot from '../Spot.vue';
+import Spot from './Spot';
 
 //Style
-import Css from './../styles/spot.scss';
+import Css from '@styles/spot';
 
 //App Configuration from PHP
 const appConfig = JSON.parse(document.getElementById('app-config').textContent);

src/components/admin.vue

@@ -1,7 +1,7 @@
 <script>
-import SpotIcon from './spotIcon.vue';
+import SpotIcon from '@components/spotIcon';
-import SpotButton from './spotButton.vue';
+import SpotButton from '@components/spotButton';
-import AdminInput from './adminInput.vue';
+import AdminInput from '@components/adminInput';
 
 export default {
 	components: {

src/components/project.vue

@@ -4,14 +4,14 @@ import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'map
 import { createApp, ref, provide, inject } from 'vue';
 import Simplebar from 'simplebar-vue';
 
-import lightbox from '../scripts/lightbox.js';
+import lightbox from '@scripts/lightbox';
-import { getOuterWidth } from '../scripts/common.js';
+import { getOuterWidth } from '@scripts/common';
 
-import SpotIcon from './spotIcon.vue';
+import SpotIcon from '@components/spotIcon';
-import SpotIconStack from './spotIconStack.vue';
+import SpotIconStack from '@components/spotIconStack';
-import SpotButton from './spotButton.vue';
+import SpotButton from '@components/spotButton';
-import ProjectPost from './projectPost.vue';
+import ProjectPost from '@components/projectPost';
-import ProjectPopup from './projectPopup.vue';
+import ProjectPopup from '@components/projectPopup';
 
 export default {
 	components: {

src/components/projectMediaLink.vue

@@ -1,6 +1,6 @@
 <script>
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
-import projectRelTime from './projectRelTime.vue';
+import projectRelTime from '@components/projectRelTime';
 
 export default {
 	components: {

src/components/projectPopup.vue

@@ -1,9 +1,9 @@
 <script>
-import projectMapLink from './projectMapLink.vue';
+import projectMapLink from '@components/projectMapLink';
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
-import projectRelTime from './projectRelTime.vue';
+import projectRelTime from '@components/projectRelTime';
-import projectMediaLink from './projectMediaLink.vue';
+import projectMediaLink from '@components/projectMediaLink';
-import { options } from '../scripts/lightbox';
+import { options } from '@scripts/lightbox';
 
 export default {
 	components: {

src/components/projectPost.vue

@@ -1,12 +1,12 @@
 <script>
-	import spotIcon from './spotIcon.vue';
+	import spotIcon from '@components/spotIcon';
-	import spotIconStack from './spotIconStack.vue';
+	import spotIconStack from '@components/spotIconStack';
-	import spotButton from './spotButton.vue';
+	import spotButton from '@components/spotButton';
-	import projectMediaLink from './projectMediaLink.vue';
+	import projectMediaLink from '@components/projectMediaLink';
-	import projectMapLink from './projectMapLink.vue';
+	import projectMapLink from '@components/projectMapLink';
-	import projectRelTime from './projectRelTime.vue';
+	import projectRelTime from '@components/projectRelTime';
 	import { LngLat } from 'maplibre-gl';
-	import { copyTextToClipboard } from '../scripts/common.js';
+	import { copyTextToClipboard } from '@scripts/common';
 
 	import autosize from 'autosize';
 

src/components/projectRelTime.vue

@@ -1,5 +1,5 @@
 <script>
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/spotButton.vue

@@ -1,5 +1,5 @@
 <script>
-import SpotIcon from './spotIcon.vue';
+import SpotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/spotIcon.vue

@@ -1,6 +1,6 @@
 <script>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { getIcon } from '../scripts/icons.js';
+import { getIcon } from '@scripts/icons';
 
 export default {
 	components: {
@@ -55,3 +55,17 @@ export default {
 	</span>
 	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 </template>
+
+<style lang="scss" scoped>
+@use "@styles/var";
+
+.spot-icon {
+	&.margin-right {
+		margin-right: var.$elem-spacing;
+	}
+
+	&.margin-left {
+		margin-left: var.$elem-spacing;
+	}
+}
+</style>

src/components/spotIconStack.vue

@@ -1,6 +1,6 @@
 <script>
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
-import spotIcon from './spotIcon.vue';
+import spotIcon from '@components/spotIcon';
 
 export default {
 	components: {

src/components/upload.vue

@@ -4,8 +4,8 @@ import Uppy from '@uppy/core';
 import XHRUpload from '@uppy/xhr-upload';
 import '@uppy/core/css/style.min.css';
 
-import SpotIcon from './spotIcon.vue';
+import SpotIcon from '@components/spotIcon';
-import SpotButton from './spotButton.vue';
+import SpotButton from '@components/spotButton';
 
 export default {
 	name: 'upload',

src/scripts/jquery.helpers.js

@@ -1,4 +1,4 @@
-import { getDragPosition } from './common.js';
+import { getDragPosition } from '@scripts/common';
 
 $.prototype.defaultVal = function(sDefaultValue)
 {

src/scripts/lightbox.js

@@ -1,5 +1,5 @@
 import { icon } from '@fortawesome/fontawesome-svg-core';
-import { getIcon } from './icons.js';
+import { getIcon } from '@scripts/icons';
 
 const defaults = {
 	albumLabel: 'Image %1 of %2',

src/styles/_common.scss

@@ -1,4 +1,4 @@
-@use "color";
+@use "@styles/color";
 
 /* Animations */
 

src/styles/_fa.scss

@@ -1,11 +0,0 @@
-@use "var";
-
-.spot-icon {
-	&.margin-right {
-		margin-right: var.$elem-spacing;
-	}
-
-	&.margin-left {
-		margin-left: var.$elem-spacing;
-	}
-}

src/styles/_lightbox.scss

@@ -1,6 +1,6 @@
-@use "common";
+@use "@styles/common";
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 body.lb-disable-scrolling {
 	overflow: hidden;

src/styles/_mobile.scss

@@ -1,4 +1,4 @@
-@use "var";
+@use "@styles/var";
 
 @media only screen and (max-width: 800px) {
 

src/styles/_page.admin.scss

@@ -1,5 +1,5 @@
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 #admin {
 	margin: 1em;

src/styles/_page.project.feed.scss

@@ -1,5 +1,5 @@
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 #feed {
 	#feed-panel {

src/styles/_page.project.map.scss

@@ -1,6 +1,6 @@
-@use "common";
+@use "@styles/common";
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 $thumbnail-max-size: 60px;
 

src/styles/_page.project.panel.scss

@@ -1,6 +1,6 @@
-@use "common";
+@use "@styles/common";
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 $panel-width: 30vw;
 $panel-width-max: "400px + 3 * #{var.$block-spacing}";

src/styles/_page.project.scss

@@ -1,10 +1,10 @@
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
-@use 'page.project.map' as map;
+@use '@styles/page.project.map' as map;
-@use 'page.project.panel' as panel;
+@use '@styles/page.project.panel' as panel;
-@use 'page.project.feed' as feed;
+@use '@styles/page.project.feed' as feed;
-@use 'page.project.settings' as settings;
+@use '@styles/page.project.settings' as settings;
 
 #projects {
 	overflow: hidden;

src/styles/_page.project.settings.scss

@@ -1,6 +1,6 @@
-@use "common";
+@use "@styles/common";
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 #settings {
 	#settings-panel {

src/styles/_page.upload.scss

@@ -1,5 +1,5 @@
-@use "var";
+@use "@styles/var";
-@use "color";
+@use "@styles/color";
 
 #upload {
 	padding: 1em;

src/styles/spot.scss

@@ -1,16 +1,15 @@
 /* Site Global CSS */
 @use "sass:meta";
-@use 'common';
+@use '@styles/common';
 
 /* Modules */
-@use 'fa';
+@use '@styles/lightbox';
-@use 'lightbox';
+@import 'simplebar-vue/dist/simplebar.min.css';
-@import '../../node_modules/simplebar-vue/dist/simplebar.min.css';
+@include meta.load-css('@styles/vue');
-@include meta.load-css('vue');
 
 /* Pages Specific CSS */
-@include meta.load-css('page.project');
+@include meta.load-css('@styles/page.project');
-@include meta.load-css('page.upload');
+@include meta.load-css('@styles/page.upload');
-@include meta.load-css('page.admin');
+@include meta.load-css('@styles/page.admin');
 
-@include meta.load-css('mobile');
+@include meta.load-css('@styles/mobile');