Toon posts:

[Laravel] OctoberCMS|Mix: Probleem met asset paths

Pagina: 1
Acties:

Vraag


  • RoelZ
  • Registratie: Oktober 2005
  • Laatst online: 30-12-2022
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:
1
2
3
4
5
.media {
    img {
        content: url('../images/theme-preview.svg');
    }
}


Op dit moment heb ik mijn webpack.mix.js als volgt ingesteld
JavaScript:
1
2
3
4
5
6
7
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 _/-\o_ O+

- Creating more joy for people who interact with our digital world

Alle reacties


  • mbenjamins
  • Registratie: December 2012
  • Laatst online: 15:17
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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:
1
2
3
4
5
6
7
8
9
10
mix.options({
        /**
         * File Loader directory defaults.
         *
         * @type {Object}
         */
        fileLoaderDirs: {
            images: 'themes/project/images'
        }
    })

  • RoelZ
  • Registratie: Oktober 2005
  • Laatst online: 30-12-2022
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.. 8)7 :z

- Creating more joy for people who interact with our digital world



Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee