SASS/SCSS中@import前的~符号含义及作用是什么？

嘿，这个问题其实挺常见的，只是因为它属于构建工具和预处理器协作的细节，所以很少有专门的文章单独拆解——我来给你讲明白！

• 核心作用：~符号是给SASS预处理器（配合Webpack、Parcel这类前端构建工具使用时）的一个“指令”：别把这个路径当成普通的相对/绝对路径去文件系统里找，直接去项目的node_modules目录里定位对应的包！
• 和常规路径的区别：
  • 不加~的话，SASS会严格按照文件系统的相对路径查找，比如@import './styles/variables'就是找当前目录下styles文件夹里的variables文件；
  • 加了~之后，比如@import '~bootstrap/scss/bootstrap'，构建工具会直接跳转到node_modules/bootstrap/scss/目录下找bootstrap.scss文件，不用写冗长的相对路径（比如../../node_modules/...这种容易出错的写法）。
• 适用场景：当你要引入第三方CSS/SASS库（比如Bootstrap的SASS版本、Tailwind的基础样式）时，~能大幅简化路径写法，还能避免因为项目目录层级调整导致的路径错误。
• 注意事项：这个符号不是SASS原生语法，是Webpack的sass-loader、Parcel这类构建工具额外支持的特性。如果你直接用纯SASS命令行编译（比如sass input.scss output.css），加~反而会报错，因为原生SASS根本不认识这个符号。

举个实际例子：
假设你在项目里安装了bootstrap的SASS包，用常规相对路径的写法可能是：

@import '../../node_modules/bootstrap/scss/bootstrap';

用~简化后就变成了：

@import '~bootstrap/scss/bootstrap';

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