Using SASS_PATH in .env triggers warnings in console

[martinsik]

Documentation for using SASS at https://create-react-app.dev/docs/adding-a-sass-stylesheet mentions that I can create .env file with SASS_PATH option so when importing files in SCSS I don't need to use relative paths and use just for example @import 'vars'.

However, when I use SASS_PATH I get a lot of warning messages in when starting the app with npm run start.

WARNING in ./src/components/Content/Content.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/Content/Content.module.scss)
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "src/styles/_vars.import"
 * "src/styles/_vars.import.css"
 * "src/styles/_vars.import.sass"
 * and more ...

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /Users/martinsikora/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: ^5.0.1 => 5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. create .env. file with SASS_PATH` variable as described in https://create-react-app.dev/docs/adding-a-sass-stylesheet.

Expected behavior

Should not print any warnings.

Actual behavior

Prints a lot of warnings into console.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[mallikcheripally]

Add SASS_PATH=src to your .env file assuming your SASS files code is in src folder. Add the same variable to any other local environment files you might use like .env.development.

In your .scss files, import using the absolute syntax like @import "src/scss/variables"; instead of @import "scss/variables";

[pavelspichonak]

Any plans to fix it?

[martinsik]

@mallikcheripally I know how to use SASS_PATH. What I'm describing happens when I create SASS_PATH.

[web-bert]

I am getting the same issue too, this is blocking me from updating other dependencies as I need webpack v5. Updating ~60 files to remove the need for SASS_PATH is not an ideal solution.

[niksauer]

@martinsik @web-bert See solution in https://github.com/facebook/create-react-app/issues/12329#issuecomment-1303783916