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
About this issue
- Original URL
- State: open
- Created 4 years ago
- Comments: 15
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.