webpack css-loader removing leading slash in url()

Question

I have a path set in a scss file to a resource I need referenced off the root of the domain. The problem is css-loader removes the leading slash during build, even with the option { url: false }.

url('/path/to/file') -> url('path/to/file')

Any ideas why it does this, and how to avoid? Thanks.

Edit: Should mention I'm using create-react-app with react-app-rewired. My configs:

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [, css] }) => {
    css.options = { ...css.options, url: false };
  })
);

console.log of style loaders:

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 1, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 1,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 3, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 3,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

Could it possibly be one of the other loaders responsible?

Normally with `{ url: false }` it doesn't touch your path. Can you show your config file? — Youssouf Oumar, Jul 09 '22 at 07:42
Forgot to mention I'm using create-react-app (v4) with react-app-rewired. Updated the question with more details. — Drazen Bjelovuk, Jul 09 '22 at 08:36

Drazen Bjelovuk · Accepted Answer · 2022-07-11T06:45:46.777

Turns out it was the resolve-url-loader, particularly the root option set to the project src by CRA.

Similar to the (now defunct) option in css-loader. This string, possibly empty, is prepended to absolute URIs. Absolute URIs are only processed if this option is set.

Not sure exactly how or when this changed, but this only became a problem for me after upgrading to CRA v4. In any case, the following adjustment (removing the root option) seemed to do the trick:

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [miniExtract, css, postcss, resolveUrl, sass] }) => {
    css.options = { ...css.options, url: false };
    if (resolveUrl) {
      delete resolveUrl.options.root;
    }
  })
);

webpack css-loader removing leading slash in url()

1 Answers1