Skip to content

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

Closed
@arkn98

Description

@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

  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 [email protected]. 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'

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions