Add webpack aliases for CSS and JS directories

web/themes/custom/opdavies/assets/js/app.js

@@ -1,5 +1,5 @@
-import '../css/tailwind.pcss'
 import 'alpinejs'
+import 'styles/tailwind.pcss'
 import hljs from 'highlightjs'
 
 document.addEventListener('DOMContentLoaded', event => {

web/themes/custom/opdavies/webpack.config.js

@@ -1,4 +1,5 @@
 let Encore = require('@symfony/webpack-encore')
+let path = require('path')
 
 Encore
     .disableSingleRuntimeChunk()
@@ -6,10 +7,15 @@ Encore
     .setOutputPath('build/')
     .setPublicPath('/themes/custom/opdavies/build')
 
-    .addEntry('app', './assets/js/app.js')
+    .addEntry('app', '@/app.js')
 
     .enablePostCssLoader()
 
+    .addAliases({
+        '@': path.resolve(__dirname, 'assets', 'js'),
+        styles: path.resolve(__dirname, 'assets', 'css')
+    })
+
 if (!Encore.isProduction()) {
     Encore.enableSourceMaps()
 }