Search code examples
urlsassresolvewebpack-encore

How to not resolve url() with Dart Sass in Webpack encore?

I just switched from node-sass to sass (Dart Sass) to compile my scss files to css. I use Symfony's Webpack Encore, and I have enableSassLoader() in my webpack.config.js with no specific config.

With node-sass I could use url() css property with an url pointing to the public folder

.myClass {
  background: url('/path/inside/public-folder/img.png')
}

And it worked perfectly.

But now with sass, when I build my app, I got an error message because sass tries to resolve the path inside my assets files, that I do not want, and I can't find a way to tell sass: Do not resolve path in url() in my scss.

Any idea how to achieve this? Maybe some options to pass to enableSassLoader()?

Solution

  • I finally found how to no resolve urls, it was not in enableSassLoader, but in configureCssLoader in webpack.config.js:

    .configureCssLoader((options) => {
  options.url = false
})