create-react-app: Using url in SCSS mixin in another file doesn't import files correctly

Reopened from #7777, which was closed because the fix was supposedly released in 3.3.1, but it is still broken.

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

node version: v10.16.3 npm version: 6.13.7

Which terms did you search for in User Guide?

  • scss
  • sass

nothing regarding this issue came up

Environment

➜  create-react-app-issue-7598 git:(master) ✗ npx create-react-app --info
npx: installed 99 in 6.073s

Environment Info:

  current version of create-react-app: 3.3.1
  running from /Users/dak/.npm/_npx/67157/lib/node_modules/create-react-app

  System:
    OS: macOS High Sierra 10.13.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Chrome: 80.0.3987.100
    Firefox: 72.0.2
    Safari: 11.1
  npmPackages:
    react: 16.12.0 => 16.12.0
    react-dom: 16.12.0 => 16.12.0
    react-scripts: 3.3.1 => 3.3.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

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

Expected behavior

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

Actual behavior

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

Reproducible demo

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

About this issue

Most upvoted comments

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.

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.

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.

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.