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

[Dakkers]

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

[stale[bot]]

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.

[Dakkers]

denied

[stale[bot]]

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.

[Dakkers]

back off mate

[stale[bot]]

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.

[danconnell]

Bump for justice

[Dakkers]

[ghost]

BUMP making nav bar in react-app and the scss files can't be imported under src. browser returns error of failure to compile.

[ghost]

@Dakkers After some tinkering around, I found that placing the main .scss files directly within the src folder works best. Had to do the same w/ my nav.js file too. It doesn't necessarily resolve the issue of using import though, still having issues w/ it myself.

[stale[bot]]

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.

[danconnell]

Pls

--
Dan Connell

On Sat., Aug. 29, 2020, 5:09 a.m. stale[bot], [e-mail]
wrote:

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.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/8481#issuecomment-683262275,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAV3LNGL5TODSNG6OVDILF3SDDAUZANCNFSM4KUV43VA
.

[stale[bot]]

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.

[danconnell]

Bump