search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Pb Background Url() when Scss is compiled - Webpack Encore/Symfony 3.4 #102

Closed Hery103 closed 5 years ago

Hery103 commented 5 years ago

Hello This is my first Issue :-)

Background Url() in my compiled scss doesn't appear. I follow Sass Loader documentation, i install "Resolve Url loader", and i try to look at other Issues related the same Pb, but I don't understand how to resolve it with my configuration :

// package.json
{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.20.1",
    "bootstrap": "^4.1.3",
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.3",
    "popper.js": "^1.14.4",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "webpack-notifier": "^1.6.0"
  },
  "name": "pde2018_project",
  "version": "1.0.0",
  "main": "index.js",
  "author": "hery",
  "license": "MIT"
}
// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/web')

    .addEntry('app', './assets/js/app.js')
    .addEntry('lightboxJs', './assets/js/lightbox.js')
    .addEntry('hamburger', './assets/js/hamburger.js')

    .addEntry('base', './assets/scss/base.scss')
    .addEntry('accueil', './assets/scss/accueil.scss')
    .addEntry('portrait', './assets/scss/portrait.scss')
    .addEntry('lightboxCss', './assets/scss/lightbox.scss')

    .autoProvidejQuery()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSassLoader()

module.exports = Encore.getWebpackConfig();

// lightbox.scss
.lb-data .lb-close {
...
  background: url(../images/close.png);
...
}

The Url is compiled to ---------> background: url(/web/images/close.d9d2d0b1.png);

How can i set my "webpack.config.js" ? I tried to install "Resolve Url loader", but how to adapt it and where can i insert the example of documentation in my code ?

Thanks I'm Newbieeee :-)

bholloway commented 5 years ago

If I understand correctly then webpack is compiling without error.

If so that means that sass and resolve-url-loader are working.

The final path that webpack writes is a separate concern. The publicPath you supplied is prepended to give the final uri.

It sounds like your web server isn’t serving the asset on this uri.

Hery103 commented 5 years ago

@bholloway Yes that's right ! Original image is assets/images/close.png My browser developper tools point to ----> /web/images/close.d9d2d0b1.png -----> nothing appear Image is compiled in /web/build/images/close.d9d2d0b1.png I tried to copy directly "close.d9d2d0b1.png" into web/images ---> Nothing happens on browser

I think Resolve url loader is the solution but how insert your follow exemple on my webpack.config.js ----> Resolve url loader exemple

bholloway commented 5 years ago

@Hery-Rs please take a look at resolve-url-loader@next for better instructions. This new version will be released within the week 🤞 so maybe best to start there.

From what I can tell you want the file outputted to /web/images/close.d9d2d0b1.png but you are getting /web/build/images/close.d9d2d0b1.png.

If so then it looks like a mismatch between your output path and public path. Either use .setOutputPath('web') or else .setPublicPath('/web/build').

I am not sure where /images comes from though. Maybe that is the default for Encore?

bholloway commented 5 years ago

@Hery-Rs I'm going to close this issue. Although this is out of scope of resolve-url-loader I hope that I was helpful.