# Can I disable absolute url() rebase in CSS?

**URL:** https://discourse.roots.io/t/can-i-disable-absolute-url-rebase-in-css/14958
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2019-03-01T14:12:43Z
**Posts:** 5

## Post 1 by @bikubi — 2019-03-01T14:12:43Z

When I have `@font-face { url(../fonts/foo.woff) }` in a SCSS file, it compiles to `url(/wp-content/...`.  
I would like to keep the path relative in `dist/`.  
Couldn’t find the appropriate Postcss (?) option.

(For context: my staging environment is not in the domain’s root. Yes, I know that is probably a bad idea. And yes, I know I can change `publicPath`, even dependant on the env, but this creates another layer of… mess, that I’d rather not untangle – if it helps you, consider this a curious query about the (opaque-ish, IMO) configuration of Postcss : )

---

## Post 2 by @alwaysblank — 2019-03-01T18:54:32Z

Unless you have a PostCSS plugin that specifically re-writes your URLs, I believe what’s happening is that the paths are re-written by webpack as it goes through the process of optimizing, copying, and stuffing your assets into a manifest. From what I recall, this is just part of how webpack works: It’ll look through all of your CSS, find the assets you’re linking to, optimize, move, and manifest-ize them, and then re-writes the links in your CSS as it dumps int out to a file.

---

## Post 3 by @bikubi — 2019-03-01T19:09:59Z

thanks!  
but, hence my (?) after postcss… at some point something injects/resolves the `publicPath` into `url()`, and i wonder if there is a way to tell ~~postcss~~ webpack not to do that?

---

## Post 4 by @alwaysblank — 2019-03-01T19:32:24Z

What have you tried so far?

You might look into this line in Sage’s [`webpack.config.js`](https://github.com/roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/webpack.config.js#L92):

```
{ loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
```

It looks like that’s probably calling this package: [https://www.npmjs.com/package/resolve-url-loader](https://www.npmjs.com/package/resolve-url-loader) …Which appears to re-write URLs.

Webpack handles all assets that pass through the build process, so looking for the loader rules that handle the file type of whatever you’re trying to mess with (`.scss` in this case) is usually a good starting point.

I’d also recommend reading through the [webpack docs](https://webpack.js.org/concepts) to get an idea of how webpack works (even if you aren’t writing your own webpack config from scratch). Just a general understanding of some of webpack’s concepts (i.e., it’s not a task runner like gulp) can be _very_ helpful for diagnosing and solving problems you run into in the build process.

---

## Post 5 by @bikubi — 2019-03-02T13:16:36Z

Well, I tried grepping package.json for suspects :slight_smile:

I feel like you are on the right track, but reading through `resolve-url-loader` and the reasoning behind it suggests that what I’m trying to do really _is_ a _bad idea_. Or at least, not worth the trouble. Btw, removing the `resolve-url` `loader` (unexpectedly) had no effect on my `url()`s.

And thank you on the general webpack info, coming from gulp and grunt I can see my fallacy now.