卸载node-sass后仍报错,主因是配置残留(如implementation: require('node-sass'))、sass-loader版本不匹配导致this.getoptions is not a function,以及dart sass模块化作用域使@import变量失效,需改用@use并规范路径与文件名。

直接换掉 node-sass 不能解决报错,真正卡住的是模块作用域、函数路径和 loader 配置残留。
为什么 npm uninstall node-sass 后还报错?
常见现象是:卸载后仍出现 SassError: Invalid CSS after "" 或 can't find stylesheet to import。这不是包没删干净,而是构建工具还在 fallback 到旧实现。
- 检查
vue.config.js或webpack.config.js中是否残留implementation: require('node-sass')—— 这行必须删掉,否则sass-loader会强行加载已卸载的包 - 运行
npm ls node-sass和npm ls sass,若两者共存,sass-loader默认优先用node-sass(除非显式指定implementation) - 某些 UI 库(如
element-ui)的.scss文件里有隐式@import,卸载后需手动验证样式是否仍能编译通过
@import 突然失效,变量全报 undefined
Dart Sass 默认启用模块系统(legacy: false),@import 不再把变量/函数注入全局作用域,这是语义变更,不是 bug。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 原写法
@import "variables"→ 改为@use "variables" as *(全局注入)或@use "variables"+variables.$primary(显式命名空间) - 路径必须以
./或../开头:@use "./variables",不能写@use "variables"(除非在includePaths里声明过) - 文件名要匹配:
@use "variables"对应_variables.scss;私有文件(如_mixins.scss)不能直接@use,得先重命名为mixins.scss或用@forward
calc(100% / 3) 编译失败,注释也绕不过
这不是 Dart Sass “变严格”,是 LibSass 根本无法识别 calc() 是原生 CSS 函数——错误发生在词法解析阶段,连 // sass:disable-next-line 都没机会执行。
-
width: calc(100% / 3)在 LibSass 下直接报Invalid CSS after "100%": expected expression - Dart Sass 正确分离 CSS 原生语法和 Sass 扩展逻辑,该写法可无损透出
- 同理,
@container、color-mix()、hwb()等现代特性,LibSass 一律不识别,Dart Sass 原样输出 - 注意
::v-deep .foo必须带空格,::v-deep.foo会被当成伪类名报错
sass-loader 版本不匹配引发 this.getOptions is not a function
这个错误本质是 Webpack 5+ 的 loaderContext.getOptions() API 被旧版 sass-loader 调用,但底层未实现。
- Vue CLI 4.x 默认配
sass-loader@10,需手动升级到@12.6.0(不要装@14+,它要求sass@1.75.0+,而 Vue CLI 4 不兼容) - Webpack 5 用户建议装
sass-loader@13.3.2+sass@1.70.0组合,稳定且兼容性好 - 删掉配置里的
implementation字段——现代sass-loader会自动找sass包;若保留,请确认是require('sass'),不是require('dart-sass')(后者早已重定向弃用) - 清缓存:
rm -rf node_modules/.cache,否则 Webpack 可能复用旧 loader 实现
最容易被忽略的是 includePaths: ["node_modules"] 这种配置——Dart Sass 会递归扫描整个 node_modules 查找 @use 目标,I/O 开销极大,编译可能慢几秒甚至超时。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










