-
-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
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-appproject -
install
node-sass -
create
.envfile in the root of the directory and addSASS_PATH=node_modules:srcas mentioned in the docs (here) -
create an
assetsfolder insrcand add a sample svg file, saymysvg.svg, intoassets -
rename
App.csstoApp.scssand change import inApp.js -
move the
App.jsandApp.scssfile inside some directory insidesrc, saycomponentslike sosrc
| - assets
| | - mysvg.svg
| - components
| | - App.js
| | - App.scss -
import svg in
App.scssin some class, saymyclass, 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 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'