[Laravel] OctoberCMS|Mix: Probleem met asset paths

[RoelZ]

Voor een Custom Theme binnen OctoberCMS heb ik momenteen de volgende structuur

• public (symlink)
  • /themes/project/
• themes/
  • project/
    • assets/
      • src/
        • fonts
        • images
        • js
        • sass

Ter voorbeeld: In mijn .scss maak ik als volgt referenties naar assets

JavaScript:

.media {
    img {
        content: url('../images/theme-preview.svg');
    }
}

Op dit moment heb ik mijn webpack.mix.js als volgt ingesteld

JavaScript:

let mix = require('laravel-mix');

mix
    .setPublicPath('./')
    .js('assets/src/js/app.js', 'js/')
    .sass('assets/src/sass/app.scss', 'css/')
    .browserSync();

Probleem
Hierdoor worden alle referenties (naar mijn assets) opgepakt en naar /themes/project/images/ gezet.
Maar het path in mijn gecompileerde .CSS verwijst naar /images/ in plaats van /themes/project/images/

...

Het gaat om een schone Laravel / OctoberCMS installatie.
Ik heb er voor gekozen om mijn NPM (package.json) en webpack.mix.js vanuit mijn Theme te laten starten omdat ik zo het theme afzonderlijk kan delen met andere projecten. Wellicht dat hier een oorzaak van het probleem zit.
...

In de documentatie van OctoberCMS en Laravel vindt ik geen default voorbeeld hoe je dit zou moeten aanpakken. Vreemd genoeg heb ik ook al tientallen searches gedaan op mijn probleem, maar geen antwoord kunnen vinden waardoor ik vermoed dat ik het op een verkeerde manier aanvlieg.

Ik ben (inmiddels) redelijk bekend met Webpack en Mix.
Ik ben ook op de hoogte van de mogelijkheid om gebruik te maken van processCssUrls: false echter blijf ik nog steeds in conflict met het handmatig assets te moeten kopiëren (.copyDirectory()) wat niet mijn voorkeur heeft, gezien ik alleen de assets wil kopiëren die gebruikt worden.
...

Any help of insight would be helpful

[mbenjamins]

Ik weet niet welke versie je gebruikt van Laravel Mix je gebruikt.
Je kunt 1 van de volgende 2 code proberen.

Voor versie 1

JavaScript:

mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif)$/,
                    loaders: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: path => {
                                    if (! /node_modules|bower_components/.test(path)) {
                                        return 'themes/project/images/[name].[ext]?[hash]';
                                    }

                                    return 'themes/project/images/vendor/' + path
                                        .replace(/\\/g, '/')
                                        .replace(
                                            /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
                                        ) + '?[hash]';
                                },
                                publicPath: Config.resourceRoot
                            }
                        },

                        {
                            loader: 'img-loader',
                            options: Config.imgLoaderOptions
                        }
                    ]
                }
            ]
        }
    })

Voor versie 2

JavaScript:

mix.options({
        /**
         * File Loader directory defaults.
         *
         * @type {Object}
         */
        fileLoaderDirs: {
            images: 'themes/project/images'
        }
    })

[RoelZ]

Hey mbenjamins, bedankt voor de hulp!

Ik gebruik versie 2.
De fileLoaderDirs werkt voor mijn CSS urls, echter plaatst Webpack de images nu in /themes/project/themes/project/.
En dit is de loop waar ik mijzelf heb ingewerkt en niet uit kom..