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

[Dakkers]

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

[robertvansteen]

Have you tried using a relative path instead? Like ./some-image?

[Dakkers]

@rovansteen yes; using the code from my example repo and changing the mixin use to:

  @include next-gen-image('./img/dk-kart', 'jpg');

results in the same Can't resolve <...> error

[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

[texas697]

need help as well

[tkalliom]

I believe this is due to the introduction of resolve-url-loader in #5829 . The motivation of that package is to support a feature-based directory structure, where relative paths in imported scss files are resolved relative to the importee, not the importer. However, as noted at https://www.npmjs.com/package/resolve-url-loader#user-content-mixins that breaks mixins

[Dakkers]

it's unfortunate to see that their solution is "You will need to work around this" - how? should I just copy and paste that mixin in every single file? 🤦‍♂

[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.

[Dakkers]

Pls don't mark this as stale :'(

…

On Sat, Nov 23, 2019, 9:17 AM stale[bot], ***@***.***> 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 authored the thread. Reply to this email directly, view it on GitHub <#7777?email_source=notifications&email_token=ABGG54DRTIPUISW3A2PUWSDQVE3PRA5CNFSM4I5EQ2D2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE7WAAA#issuecomment-557801472>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABGG54FQZUZKZYRT4QVBXM3QVE3PRANCNFSM4I5EQ2DQ> .

[sepehrity]

I have the same problem. Any update on this issue?