CODEWITHSUNDEEP
webpacksass
edA-qa mort-ora-y
edA-qa mort-ora-y

Reputation: 31951

How do I make scss / sass / css-loader not resolve url calls? (Inside WebPack)

I have several calls to url(some-path) in my SCSS file and css-loader is insisting on resolving those URLs to something it knows. These included files are available on the server/web, but aren't visible to WebPack. How can I get it to just accept the strings?

In my scss file I have a font-face, for example:

@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: 'Noto Serif';
    src: url($font-path + 'NotoSerif-Regular.ttf');
}

And I get an error:

Error: Can't resolve '/static/fonts/NotoSerif-Regular.ttf'

I just want it to emit this string without trying to resolve it. I have no rules in my WebPack file that would tell it to include TTF files. I recently upgraded the sass/css/loader node modules; before it was working.

I don't know if the error is coming from WebPack or Sass.

Upvotes: 2

Views: 1530

Answers (2)

pieroxy
pieroxy

Reputation: 859

I added the following in my webpack.config.js in order to exclude some URLs from webpack resolution:

{
  loader: 'css-loader',
  options: {
    url: {
      filter: (url, resourcePath) => {
        if (url.indexOf("/fonts/")==0) {
          return false;
        }
        return true;
      },
    }
  }
}

Upvotes: 1

edA-qa mort-ora-y
edA-qa mort-ora-y

Reputation: 31951

There is a setting in the css-loader to disable URL resolution:

                // Translates CSS into CommonJS
                loader: 'css-loader',
                options: {
                    url: false,
                },

One of the version upgrades must have changed the default for this to true, making it backwards incompatible.

Upvotes: 2

Related Questions