IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Webpack Encore utilisation des alias [4.x]


Sujet :

Symfony PHP

  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut Webpack Encore utilisation des alias
    Bonjour,

    Dans des fichiers css, je cherche à utiliser un alias dans les fonctions url() pour indiquer le répertoire de certaines images qui se trouvent dans mon_projet/public/images.
    Donc, dans webpack.conf.js, j'ai créé un alias @images comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    ...
    var path = require('path');
    ...
    Encore
    ...
        .addAliases({'@images': path.resolve(__dirname, 'public/images')})
    ...
    ;
    module.exports = Encore.getWebpackConfig();
    Dans mon css, je cherche à accéder à une image de cette manière :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
      background-image: url('~@images/sprite.svg');
    Or, de cette manière, l'image n'est pas affichée. Lorsque j'inspecte le css généré, j'ai ceci :

    background-image: url(/build/images/sprite.56e5c9c8.svg);
    Lorsque j'ouvre le fichier sprite.56e5c9c8.svg généré dans /build/images/, j'ai ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";
    Quelqu'un aurait une idée sur l'origine du fait que mon image ne s'affiche pas?

    Merci d'avance pour votre aide.

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    157
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : octobre 2006
    Messages : 157
    Points : 79
    Points
    79
    Par défaut
    Salut,

    Il y a ce lien sur Webpack Encore qui peut peut être t'aider:

    https://stackoverflow.com/questions/...e-in-symfony-4

    @+

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Merci beaucoup pour ton intérêt. Cependant, je ne vois pas d'exemple d'utilisation d'alias dans le lien que tu as fourni...

  4. #4
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Quand je fais exactement ce que tu décris, j'ai l'image dans mon dossier build/images.

    Apparement, c'est un bug qui survient, mais uniquement quant tu fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import css from '../css/styles.scss';
    au lieu de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    require('../css/styles.scss');
    Vois si ça peut t'aider.

  5. #5
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Merci beaucoup pour ton aide. Cependant, je ne parviens toujours pas à travailler avec les alias.

    Suivant tes conseils, dans mon fichier app.js, j'ai fait :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    require('../css/app.scss');
    Ensuite, dans webpack.config.js, j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    ...
    var path = require('path');
    ...
        .setOutputPath('public/build/')
        .setPublicPath('/build')
    ...
        .addAliases({'@images': path.resolve(__dirname, '../images')})
    Pour finir, dans mon fichier icons.scss, j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    .icon{
      background-image: url('~@images/sprite.svg');
    ...
    Lors de la compilation de webpack, j'ai cette erreur :

    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleNotFoundError: Module not found: Error: Can't resolve '@images/sprite.svg' in 'C:\cmder\roadtrip\assets\css'

  6. #6
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Utilise public/images dans l'alias:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})

  7. #7
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Quand je fais cela, je n'ai plus d'erreur à la compilation, mais par contre l'image ne s'affiche pas.

  8. #8
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Là j'avoue que je ne comprends pas. J'ai refait exactement la même manip, avec une autre installation de symfony, et j'ai bien l'image. Voici les versions que j'utilse:

    Webpack encore 0.27.0 avec Webpack 4.36.1

    Est-ce que tu peux poster le contenu de ton webpack.config.js ici?

  9. #9
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Un tout grand merci pour ton aide, ça fait plaisir... car il est vrai que je rame sévère

    Voici le contenu de webpack.config.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
     
    var Encore = require('@symfony/webpack-encore');
    var path = require('path');
     
    Encore
        .autoProvidejQuery()
     
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // public path used by the web server to access the output path
        .setPublicPath('/build')
        // only needed for CDN's or sub-directory deploy
        //.setManifestKeyPrefix('build/')
     
        /*
         * ENTRY CONFIG
         *
         * Add 1 entry for each "page" of your app
         * (including one that's included on every page - e.g. "app")
         *
         * Each entry will result in one JavaScript file (e.g. app.js)
         * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
         */
     
        .addEntry('app', './assets/js/app.js')
        .addEntry('indexAdvert', './assets/js/backend/indexAdvert.js')
        .addEntry('indexEquipment', './assets/js/backend/indexEquipment.js')
        .addEntry('indexSort', './assets/js/backend/indexSort.js')
        .addEntry('indexMark', './assets/js/backend/indexMark.js')
        .addEntry('indexFuel', './assets/js/backend/indexFuel.js')
        .addEntry('indexSeason', './assets/js/backend/indexSeason.js')
        .addEntry('indexDuration', './assets/js/backend/indexDuration.js')
        .addEntry('indexBooking', './assets/js/booking/indexBooking.js')
        .addEntry('indexUser', './assets/js/backend/indexUser.js')
        .addEntry('indexSubscription', './assets/js/backend/indexSubscription.js')
        .addEntry('indexVAT', './assets/js/backend/indexVAT.js')
        .addEntry('VAT', './assets/js/backend/VAT.js')
        .addEntry('indexRating', './assets/js/backend/indexRating.js')
        .addEntry('vehicleCreation', './assets/js/advert/vehicleCreation.js')
        .addEntry('photosCreation', './assets/js/advert/photosCreation.js')
        .addEntry('periodsCreation', './assets/js/advert/periodsCreation.js')
        .addEntry('pricesCreation', './assets/js/advert/pricesCreation.js')
        .addEntry('VariousCostsCreation', './assets/js/advert/VariousCostsCreation.js')
        .addEntry('bookingCreation', './assets/js/booking/bookingCreation.js')
        .addEntry('ownerCreation', './assets/js/user/ownerCreation.js')
        .addEntry('ratingManagement', './assets/js/rating/ratingManagement.js')
        .addEntry('showAdvert', './assets/js/advert/showAdvert.js')
        .addEntry('advertsSearch', './assets/js/advert/advertsSearch.js')
        .addEntry('home', './assets/js/home/home.js')
        .addEntry('payment', './assets/js/payment/payment.js')
        .addEntry('registration', './assets/js/security/registration.js')
        .addEntry('threads', './assets/js/communication/threads.js')
        .addEntry('bookingRequestsManagement', './assets/js/booking/bookingRequestsManagement.js')
        .addEntry('bookingRemoving', './assets/js/booking/bookingRemoving.js')
        .addEntry('profile', './assets/js/user/profile.js')
        .addEntry('ownerAdverts', './assets/js/advert/ownerAdverts.js')
        .addEntry('editOwner', './assets/js/user/editOwner.js')
     
        .addEntry('calendar', './assets/css/calendar.css')
     
        .addAliases({'@images': path.resolve(__dirname, 'App/public/images')})
     
        // will require an extra script tag for runtime.js
        // but, you probably want this, unless you're building a single-page app
        .enableSingleRuntimeChunk()
     
        /*
         * FEATURE CONFIG
         *
         * Enable & configure other features below. For a full
         * list of features, see:
         * https://symfony.com/doc/current/frontend.html#adding-more-features
         */
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())
        // enables hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
     
        // enables Sass/SCSS support
        .enableSassLoader()
     
        // uncomment if you use TypeScript
        //.enableTypeScriptLoader()
     
        // uncomment if you're having problems with a jQuery plugin
        //.autoProvidejQuery()
     
        // uncomment if you use API Platform Admin (composer req api-admin)
        //.enableReactPreset()
        //.addEntry('admin', './assets/js/admin.js')
     
        .addLoader({
            test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[path][name].[hash:8].[ext]',
                    context: './assets',
                }
            }]
        })
    ;
     
    module.exports = Encore.getWebpackConfig();

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    octobre 2006
    Messages
    157
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : octobre 2006
    Messages : 157
    Points : 79
    Points
    79
    Par défaut
    Bonjour,

    Moi, également j'ai réussi à afficher l'image. Voici mon code:

    webpack.config.js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    var Encore = require('@symfony/webpack-encore');
    var CopyWebpackPlugin = require('copy-webpack-plugin'); // this line tell to webpack to use the plugin
     
    var path = require('path');
     
    Encore
        .addAliases({'@images': path.resolve(__dirname, 'public/images')})
     
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // public path used by the web server to access the output path
        .setPublicPath('/build')
     
        /*
         * ENTRY CONFIG
         *
         * Add 1 entry for each "page" of your app
         * (including one that's included on every page - e.g. "app")
         *
         * Each entry will result in one JavaScript file (e.g. app.js)
         * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
         */
        .addEntry('app', './assets/js/app.js')
     
        /*
         * FEATURE CONFIG
         *
         * Enable & configure other features below. For a full
         * list of features, see:
         * https://symfony.com/doc/current/frontend.html#adding-more-features
         */
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())
     
        .enableSingleRuntimeChunk()
     
        // enables hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
     
        // enables Sass/SCSS support
        .enableSassLoader()
     
        // uncomment if you're having problems with a jQuery plugin
        .autoProvidejQuery()
     
        .addPlugin(new CopyWebpackPlugin([
            { from: './assets/images', to: 'images' }
        ]))
    ;
     
    module.exports = Encore.getWebpackConfig();
    assets/app.scss

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    @import "~bootstrap/scss/bootstrap";
     
    body {
        background-image: url('~@images/sprite.svg')
    }
    yarn encore dev me génère bien le svg et il s'affiche bien en fond d'écran.

  11. #11
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Tu t'es perdu les pédales alors que la réponse était dans ton premier message.

    Citation Envoyé par dubitoph Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .addAliases({'@images': path.resolve(__dirname, 'App/public/images')})
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})

  12. #12
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Vraiment, un tout grand merci à vous deux pour votre aide...

    Effectivement, j'ai tenté beaucoup de choses, même

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .addAliases({'@images': path.resolve(__dirname, 'App/public/images')})
    J'ai refais avec

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})
    mais ça ne fonctionne toujours pas.

    Je me suis dit que c'était peut-être dû au fait que l'appel de l'image se faisait à partir d'un autre fichier que l'app.scss, mais non car lorsque je fais des tests depuis ce fichier, les images ne s'affichent pas non plus.

    Autre question que je me pose : j'utilise vichUploader et liip_imagine. Est-ce qu'il y a des interactions possibles? Je vais me mettre à fouiller de ce côté...

  13. #13
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Webpack ne touche pas à Symfony et Symfony ne touche pas à Webpack, je ne vois pas comment ces 2 bundles pourraient interférer.

    Vérifie bien que:
    - tu inclues tes fichiers css dans le fichier js

    - Et que l'inclusion se fait par require et pas par import.

  14. #14
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Oui, en fait mon flux est le suivant :

    Dans webpack.config.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    var Encore = require('@symfony/webpack-encore');
     
    var path = require('path');
     
    Encore
        .autoProvidejQuery()
     
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // public path used by the web server to access the output path
        .setPublicPath('/build')
    ...
        .addAliases({'@images': path.resolve(__dirname, 'public/images')})
    ...
        .addLoader({
            test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[path][name].[hash:8].[ext]',
                    context: './assets',
                }
            }]
        })
    ;
     
    module.exports = Encore.getWebpackConfig();
    Ensuite, dans mon app.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    require('../css/app.scss');
    ...
    Dans mon app.scss :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    ...
    @import "icons";
    ...
    Et enfin, dans mon icon.scss :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    .icon{
      background-image: url('~@images/sprite.svg');
    ...
    Mon fichier sprite.svg se trouve lui dans App/public/images.

    Le css généré est suivant :

    .icon {
    background-image: url(/build/images/sprite.56e5c9c8.svg);
    L'image référencée dans le css généré (sprite.56e5c9c8.svg) se trouve bien dans App/public/build/images et contient ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";
    Par contre l'image référencée dans ce dernier fichier (sprite.e9a8abfa.svg) n'existe pas dans App//public/images. Je ne comprends pas pourquoi il référencie sprite.e9a8abfa.svg au lieu de sprite.svg.

    Cependant, même lorsque je modifie moi-même le fichier sprite.56e5c9c8.svg de cette manière :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    module.exports = __webpack_public_path__ + "_/public/images/sprite.svg";
    l'image ne s'affiche pas.

    En vérifiant dans mon fichier manifest.json, j'ai bien :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
      "build/images/sprite.svg": "/build/images/sprite.56e5c9c8.svg"
    Donc, manifestement l'erreur provient de ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";
    Mais je ne vois absolument pas comment corriger cette compilation par webpack.

    EDIT : une autre information : lorsque, dans mon app.js, je fais ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    console.log("public path", __webpack_require__.p);
    j'obtiens ceci sur la console :

    public path /build/

  15. #15
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Désactives file-loader dans weback.config.js pour voir?

  16. #16
    Membre averti
    Homme Profil pro
    Inscrit en
    mai 2004
    Messages
    803
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2004
    Messages : 803
    Points : 356
    Points
    356
    Par défaut
    Effectivement, ça provient bien de là! Un tout grand merci pour ton aide si précieuse

  17. #17
    Membre émérite

    Profil pro
    Inscrit en
    mai 2008
    Messages
    1 575
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 1 575
    Points : 2 441
    Points
    2 441
    Par défaut
    Youpi!

    Maintenant, il va falloir que tu te debrouilles pour faire marcher les deux ensemble :-)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utilisation des alias dans la clause WHERE d'une requête SELECT
    Par OursRêveur dans le forum MS SQL Server
    Réponses: 14
    Dernier message: 13/07/2013, 04h34
  2. [MySQL] Utilisation des alias dans une requête
    Par methodman225 dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 29/09/2008, 12h55
  3. Utiliser des ALIAS de colonnes dans une jointure
    Par mbzhackers dans le forum SQL
    Réponses: 4
    Dernier message: 31/03/2008, 10h27
  4. bonne utilisation des alias
    Par gok6tm dans le forum Requêtes
    Réponses: 0
    Dernier message: 15/11/2007, 11h48
  5. [Oracle] utilisation des alias dans le where
    Par seddik_saber dans le forum Langage SQL
    Réponses: 4
    Dernier message: 11/09/2007, 11h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo