Using url in SCSS mixin in another file doesn't import files correctly

[Dakkers]

Describe the bug

Using an SCSS mixin (located in another file) that uses the url function makes the file unable to be found. Example:

// src/scss/mixins.scss

@mixin next-gen-image ($file-name, $fallback-ext) {
  .webp-supported & {
    background-image: url('#{$file-name}.webp');
  }

  .webp-not-supported & {
    background-image: url('#{$file-name}.#{$fallback-ext}');
  }
}

// src/jsx/routes/Home.scss
@import './../../scss/mixins';

.my-class {
  @include next-gen-image('some-image', 'jpg');
}

This should try to lookup src/jsx/routes/some-image.webp and src/jsx/routes/some-image.jpg but it instead tries to look for src/scss/some-image.webp and src/scss/some-image.jpg respectively.

This was working prior to 3.1.x.

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

N/A

Environment

  System:
    OS: macOS High Sierra 10.13.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.6.0 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 65.0.1
    Safari: 11.1
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-dom: 16.9.0 => 16.9.0
    react-scripts: 3.1.1 => 3.1.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

See code snippet above.

Expected behavior

It should import the local image files correctly

Actual behavior

It does not import local image files correctly

Reproducible demo

(don't have time right this second but I think I can make one later this week)

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.