Laravel Mix中SCSS用@import正常，换@use编译报错求助

核心问题：Sass版本与语法兼容性 #

@use是Dart Sass的新特性，而旧版的LibSass（对应npm包node-sass）完全不支持该语法——这就是你用@import正常、换@use报错的根本原因。

查看当前Sass版本的方法 #

1. 直接查看项目根目录的package.json文件，搜索sass或node-sass字段，即可看到版本号。
2. 命令行执行：

   # 查看本地项目依赖的Sass版本
   npm list sass
   # 若用的是node-sass，执行：
   npm list node-sass
   

修复步骤 #

1. 替换为支持@use的Dart Sass #

卸载旧的LibSass依赖，安装Dart Sass：

npm uninstall node-sass
npm install sass --save-dev

注：npm上的sass包就是官方的Dart Sass，无需安装dart-sass包。

2. 确认Laravel Mix配置 #

确保webpack.mix.js中使用标准的sass编译方法，新版Mix会自动识别Dart Sass：

mix.sass('resources/sass/app.scss', 'public/css');

3. 修正@use的写法细节 #

如果不想加命名空间，必须显式声明as *，同时注意路径要写相对路径（加./）：

// 正确写法：引入variables.scss并全局暴露所有变量/混合宏
@use './variables' as *;

// 错误写法：省略as *会导致必须用命名空间调用（如variables.$primary-color）
@use './variables';

4. 清理缓存重新编译 #

执行以下命令清除缓存并重新编译：

npm run dev

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