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

Reopened from #7598 because I didn’t see an option to actually re-open that issue.

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. Alternatively, see https://github.com/Dakkers/create-react-app-issue-7598

Expected behavior

It should import the local image files correctly

Actual behavior

It does not import local image files correctly

Reproducible demo

https://github.com/Dakkers/create-react-app-issue-7598

[thinkerelwin]

got similar problems too,

my case is I’ve a main scss in ‘src/assets/scss/App.scss’

it contains

@import "./components/icons";

then in ‘src/assets/scss/components/icons.scss’

it contains

.icon-check-o {
  background-image: url(../img/pc_w_icon_condition_done_large.png);
}

the image is stored in ‘src/assets/img/pc_w_icon_condition_done_large.png’

when I update my react-script from 3.0.1 to 3.2.0, got an error when ‘npm run build’, says can’t find that image

[ianschmitz]

Fixed in #8281. Released in 3.3.1