Why does using `@use` instead of `@import` for sass not work in create-react-app?

I’ve been working on a website in React for a few days and thought I’d use Sass with it, but for some reason using @use is not working while using the deprecated @import does.

This is my package.json:

{
    "name": "a-cool-project-name",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.5.1",
        "@fortawesome/free-solid-svg-icons": "^6.5.1",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.22.0",
        "react-scripts": "5.0.1",
        "sass": "^1.70.0",
        "web-vitals": "^2.1.4"
    }
}

As you can see I’ve updated sass to the latest version and am using react-scripts v5.1.0 which should be sufficient for using the @use keyword.

Here is the _variables.scss file that I want to use:

$background-color: #313131;
$main-color: #666666;
$accent-color: #65c8fb;

Here is the Home.scss file in which I want to import the variables file:

@use '../variables';

.home-page {
    .img-header {
        position: relative;
        width: 100%;

        img {
            width: 100%;
        }

        .objective {
            position: absolute;
            bottom: -5em;
            left: 10%;
            width: 50%;
            padding: 5em;
            background: $main-color;
            border-radius: 1em;
        }
    }
}

This all combined gives me the following error:

Failed to compile.

SassError: Undefined variable.
   ╷
18 │             background: $main-color;
   │                         ^^^^^^^^^^^
   ╵
  src\style\pages\Home.scss 18:25  root stylesheet

Replacing @use '../variables'; with @import '../variables' works perfectly, but I don’t want to use something that is deprecated.

Does anybody know what I could do to fix this?
Thanks in advance!

>Solution :

when accessing a variable or mixing from @use you need to access it by its namespace, which is the end of the url by default.

So, for your example, I believe it would be:

@use '../variables';

.home-page {
    .img-header {
        position: relative;
        width: 100%;

        img {
            width: 100%;
        }

        .objective {
            position: absolute;
            bottom: -5em;
            left: 10%;
            width: 50%;
            padding: 5em;
            background: variables.$main-color;
            border-radius: 1em;
        }
    }
}

Sass: @use