Discussion :

[dubitoph]

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.

[Henry22]

Salut,

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

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

@+

[dubitoph]

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...

[Tsilefy]

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.

[dubitoph]

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'

[Tsilefy]

Utilise public/images dans l'alias:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'public/images')})