SASS_PATH not respected after updating CRA from v2.1.8 to v3.0.1
Created by: arkn98
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
-
create a fresh new
create-react-app
project -
install
node-sass
-
create
.env
file in the root of the directory and addSASS_PATH=node_modules:src
as mentioned in the docs (here) -
create an
assets
folder insrc
and add a sample svg file, saymysvg.svg
, intoassets
-
rename
App.css
toApp.scss
and change import inApp.js
-
move the
App.js
andApp.scss
file inside some directory insidesrc
, saycomponents
like sosrc | - assets | | - mysvg.svg | - components | | - App.js | | - App.scss
-
import svg in
App.scss
in some class, saymyclass
, like sobackground: url('assets/mysvg.svg') 99% / 24px no-repeat rgba(0, 0, 0, 0.1);
and apply that class to some DOM element inApp.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'