Create React App中Sass的@use替代@import失效问题求助

你的问题出在**@use和@import的模块化逻辑差异**：@use是Sass的模块化导入方式，默认会给导入的模块添加命名空间，而@import是全局导入，变量直接进入当前作用域。所以直接用$main-color会找不到，按下面两种方式处理即可：

解决办法1：通过命名空间访问变量 #

修改Home.scss的变量引用，加上导入模块的命名空间（默认是文件名）：

@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;
        }
    }
}

解决办法2：用通配符别名取消命名空间 #

如果不想每次都加命名空间，可以在导入时用as *，把变量直接导入当前作用域：

@use '../variables' as *; // 添加通配符别名

.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;
        }
    }
}

补充说明：react-scripts v5.0.1和sass v1.70.0完全支持@use语法，无需修改版本或额外配置，只是你之前的用法不符合@use的模块化规则。

内容的提问来源于stack exchange，提问作者Mithras