Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #7023
Closed
Open
Issue created May 09, 2019 by Administrator@rootContributor

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

  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'
Assignee
Assign to
Time tracking