使用Sass时@use规则报错“Unknown at rule @use”的原因排查

这种情况我之前也碰到过，大概率不是Sass本身的版本问题，而是编译工具不对或者编辑器配置干扰，给你几个排查方向：

1. 检查你用的 Sass 编译器是不是 Dart Sass #

node-sass 早在几年前就停止维护了，它完全不支持 @use 这种新的模块语法。如果你之前装过 node-sass，哪怕后来装了官方的 sass（Dart Sass 的 npm 包名），旧依赖可能还在生效：

• 先卸载旧的无效依赖：npm uninstall node-sass
• 确保安装的是官方 Dart Sass：npm install sass --save-dev
• 编译时直接调用 sass 命令，比如：sass src/styles.scss dist/styles.css，别再用基于 node-sass 的工具链。

2. 编辑器的语法校验误报 #

VS Code 这类编辑器可能会用内置的 CSS 校验或旧版 SCSS 插件，把 @use 识别成未知规则：

• 打开 VS Code 设置（快捷键 Ctrl+,），搜索 scss.unknownAtRules，将其值改为 ignore，就能消除错误提示。
• 如果装了 Stylelint 插件，检查你的 .stylelintrc 配置，确保 at-rule-no-unknown 规则里添加了 ignoreAtRules: ['use']，避免它误判 @use。

3. 确认构建工具的配置正确 #

如果你用 Webpack、Vite 这类构建工具，要确保对应的 Sass 加载器用的是 Dart Sass：

• Webpack 的 sass-loader 需要在配置里指定 implementation: require('sass')，否则它可能默认找已废弃的 node-sass。
• Vite 默认用 Dart Sass，除非你手动修改过配置，可检查 vite.config.js 里的 css.preprocessorOptions.scss 有没有异常。

最后验证 #

运行编译命令后，检查输出的 CSS 文件：如果 @use "nav"; 还保留在里面，说明你的编译工具根本没识别 Sass 语法，只是把它当纯 CSS 处理了——这时候一定要确认你调用的是正确的 sass 命令，而非 CSS 相关的编译工具。

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