SASS_PATH not respected after updating CRA from v2.1.8 to v3.0.1

Is this a bug report?

yes

Did you try recovering your dependencies?

$ npm --version 6.9.0

Which terms did you search for in User Guide?

Irrelevant.

Environment

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: x64 Intel(R) Core(TM) i3 CPU       M 370  @ 2.40GHz
  Binaries:
    Node: 11.10.1 - ~/.nvm/versions/node/v11.10.1/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.10.1/bin/npm
  Browsers:
    Chrome: 74.0.3729.131
    Firefox: 66.0.4
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: 3.0.1 => 3.0.1 
  npmGlobalPackages:
    create-react-app: 2.1.8

Steps to Reproduce

1. create a fresh new create-react-app project

2. install node-sass

3. create .env file in the root of the directory and add SASS_PATH=node_modules:src as mentioned in the docs (here)

4. create an assets folder in src and add a sample svg file, say mysvg.svg, into assets

5. rename App.css to App.scss and change import in App.js

6. move the App.js and App.scss file inside some directory inside src, say components like so

   src | - assets | | - mysvg.svg | - components | | - App.js | | - App.scss

7. import svg in App.scss in some class, say myclass, like so background: url('assets/mysvg.svg') 99% / 24px no-repeat rgba(0, 0, 0, 0.1); and apply that class to some DOM element in App.js, like so <div className="myclass">abcd</div>

Expected Behavior

Compilation successful. mysvg.svg is visible on the page. This was working without any problems in my application with react-scripts@2.1.8. After I upgraded react-scripts to v3.0.1, as mentioned in the releases tab, I’m finding this.

Also this happens only if App.js and App.scss are nested inside some folder inside src. If they are in the src folder, the problem is not seen. (This makes sense actually because it is trying to resolve modules relative to the current working directory, without respecting the SASS_PATH in .env file)

Actual Behavior

Failed to compile.

./src/components/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/App.scss)
Module not found: Can't resolve './assets/mysvg.svg' in '/home/user/code/js-projects/test-sass/src/components'

[atlanteh]

After digging into the code and docs, I’ve figured it out. I’m sending a PR with the fix

[dylanjmcdonald]

Also this happens only if App.js and App.scss are nested inside some folder inside src. If they are in the src folder, the problem is not seen. (This makes sense actually because it is trying to resolve modules relative to the current working directory, without respecting the SASS_PATH in .env file)

After setting up a new project via CRA I have this issue regardless of where App.js and App.scss are located.