Docs for importing Sass partials shows broken use of @use

[alexmkio]

Describe the bug

When importing Sass partials one must use @import and not @use as the docs suggest.

Did you try recovering your dependencies?

yes. npm version = 8.4.1

Which terms did you search for in User Guide?

'use import sass partial'

Environment

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

System:
OS: macOS 12.2
CPU: (10) x64 Apple M1 Pro
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v14.16.0/bin/yarn
npm: 8.4.1 - ~/.nvm/versions/node/v14.16.0/bin/npm
Browsers:
Chrome: 98.0.4758.80
Edge: Not Found
Firefox: Not Found
Safari: 15.3
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. npx create-react-app my-app
2. cd my-app
3. npm start
4. npm install sass
5. rename App.css to App.scss
6. create _variables.scss with $grey-dark: #282c34;
7. in App.scss @use './_variables.scss'; and change background-color: #282c34; to background-color: $grey-dark;

Expected behavior

npm start should load without errors

Actual behavior

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
19 │ background-color: $grey-dark;

Reproducible demo

Project that fails to build using npm start and @use as suggested in the docs

Project that builds using npm start and @import

[alexmkio]

Found a solution for using @use based off Sass documentation.

@use './variables'
background-color: variables.$grey-dark;