Resolve relative paths for preprocessor styles

[iamandrewluca]

preprocessor will output sourceMap by default
then check if sourceMap are needed on resolve-url-loader

issue demo: https://github.com/iamandrewluca/cra-scss-relative-problem

Fixes #4653

[stale]

This pull request 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.

[iamandrewluca]

@gaearon @Timer any fedback on this please? :)

[Timer]

Sorry this fell through the cracks! I'm going to tag it for a milestone and hopefully get back to it soon. 😄

[yazeedb]

I ran this change on an internal TypeScript app, and can confirm it resolves the issue.

Might fork react-scripts to use it for now, but getting this merged would be sweeeeeeet.

[Silic0nS0ldier]

Hi everyone, any progress on this? Would be nice to clear out the dependency resources that have had to be moved into a project I'm working on. However the longer this goes unfixed, the less likely that is to happen.

[iamandrewluca]

Rebased

[iamandrewluca]

• Rebased.
• Updated resolve-url-loader to last version.

[jackwilsdon]

This seems to have issues when using NODE_PATH, as the path resolves to a relative path outside of src;

src/index.scss

@import '~example/scss/index.scss';

vendor_modules/example/scss/index.scss

body {
  background: url('../logo.svg');
}

Output from yarn build with NODE_PATH=./vendor_modules;

ModuleNotFoundError: Module not found: Error: You attempted to import ../vendor_modules/example/logo.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

[iamandrewluca]

@jackwilsdon this is not related to current issue. CRA has this restrictions from the beginning. If CRA would allow relative sources that fall outside src this error should not happen.

[jackwilsdon]

My apologies @iamandrewluca, I misunderstood this PR as being a potential fix for #5402, which is caused by sass-loader not knowing the full path to the file and instead assuming it's not in NODE_PATH or src.

[iamandrewluca]

@jackwilsdon no problem. I added a reference in #5402 (comment)

[DalerAkhmetov]

thank you for this pull request. It also be useful for working with Font Awesome 5 icon library.

There is some code in SASS file located, for example, in '/app/src/styles.scss':
@import "~@fortawesome/fontawesome-free/scss/fontawesome"; @import "~@fortawesome/fontawesome-free/scss/solid"; // this file contains "url('#{$fa-font-path}/fa-solid-900.eot')"
This sass file will generate error: Module not found: Can't resolve '../webfonts/fa-solid-900.eot' in '/app/src'.

[mrmckeb]

Hi all, sorry this fell through the cracks. I'll follow this up for now on.

@iamandrewluca - are you still interested in working on this? If so, let me know and I'll work with you to get it in.

[iamandrewluca]

@mrmckeb yes, still interested.

[mrmckeb]

OK, great. Let me take a look at this over the next few days.

I can see that you've included a demo which is great.

One small comment, otherwise it looks good.

[iamandrewluca]

@mrmckeb done!

[mrmckeb]

@ianschmitz or @iansu - any concerns on this one?

[mrmckeb]

Still waiting for feedback on this one, but I'd like to get it out in 3.1. @ianschmitz was away, but hopefully he can take a look this week.

[ianschmitz]

Just a quick change otherwise looks good.