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

Created by: 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"