Cannot resolve relative references in nested .scss files with react-scripts@2.0

[igodorogea]

Structure

my-app
├── node_modules
├── ...
└── src
    ├── styles
    │   ├── fonts
    │   │   └── asd.woff
    │   ├── fonts.scss
    │   └── typo.scss
    ├── App.js
    ├── index.scss
    └── index.js

index.scss

@import "../styles/fonts";
@import "../styles/typo";

fonts.scss

@font-face {
  font-family: "asd";
  src: url("./fonts/asd.woff") format("woff");
}

When I'm run npm start I get this error in console:

Failed to compile.

./src/index.scss)
Module not found: Can't resolve './fonts/asd.woff' in '...'

Possible resolution

As stated here this problem can be solved using resolve-url-loader.

Dependencies:

"react-scripts": "2.0.0-next.3e165448"

[andrmoel]

Any solution on this?
Just importing resolve-url-loader won't work without ejecting. :(

[EvertEt]

Did anyone figure out a solution? Will this be fixed?

[gantit]

Put your fonts on a public folder

Structure

my-app
├── node_modules
├── public
│   └── fonts
│       └── asd.woff
├── ...
└── src
    ├── styles
    │   ├── fonts.scss
    │   └── typo.scss
    ├── App.js
    ├── index.scss
    └── index.js

fonts.scss

@font-face {
  font-family: "asd";
  src: url("~/fonts/asd.woff") format("woff");
}

[EvertEt]

The fonts are coming from an shared (private) package so we are unable to copy them to each project separately.

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

[iamandrewluca]

stale bot trigger 😄

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

[stale]

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.