Repository navigation
Using url in SCSS mixin in another file doesn't import files correctly #7598
Description
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.
Expected behavior
It should import the local image files correctly
Actual behavior
It does not import local image files correctly
Reproducible demo
(don't have time right this second but I think I can make one later this week)
Activity
stale commentedon Sep 26, 2019
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.
stale commentedon Oct 1, 2019
This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.