Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

[Laravel] OctoberCMS|Mix: Probleem met asset paths

Pagina: 1
Acties:

Vraag


  • RoelZ
  • Registratie: oktober 2005
  • Laatst online: 19-06 08:19
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: 09:51
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: 19-06 08:19
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



Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True