SASS/SCSS @import 前面的 ~ 是什么意思/做什么？答案

【问题标题】：What does the ~ in front of the SASS/SCSS @import mean/do?SASS/SCSS @import 前面的 ~ 是什么意思/做什么？
【发布时间】：2018-11-02 19:28:34
【问题描述】：

在 GitHub 上有人告诉我在我的 SASS/SCSS @import 路径之前开始使用 ~。试图谷歌它，但找不到正确的答案。我想它太新手了，甚至懒得写，但我想学习它。

【问题讨论】：

【解决方案1】：

它的 webpack 功能。 ~ 等于 node_modules

【讨论】：

【解决方案2】：

~ 是对您的代码文件的相对引用。

~ 在我们导入角度材质主题和其他库时引用 node_modules。而在 ~ 的情况下，如果 SASS 引用您的本地文件来加载您的部分文件。例如：@import '~scss/variables'; 通常它是对文件系统的默认位置引用。我不确定正确的术语。

【讨论】：

【解决方案3】：

它指的是 node_modules 目录（或其等效目录）。

例如，在一个 Angular 应用程序中（当然，它使用 node.js 和 webpack）你可以这样：

引用 (@import) ~bootstrap/scss/functions 的 nav-bar.component.scss。

~ 部分指的是 node_module，其余部分 (bootstrap/scss/functions) 指的是 node_module 目录中的其余路径（见下图）

【讨论】：