app.scss 如何知道 ~foo 是 node_modules 中的 foo 目录？答案

【问题标题】：How app.scss knows that ~foo is a foo directory inside node_modules?app.scss 如何知道 ~foo 是 node_modules 中的 foo 目录？
【发布时间】：2019-07-09 10:23:50
【问题描述】：

我有一个 Laravel 项目，app.scss 位于 resources/assets/sass/frontend/。

node_modules 在根目录中。

在app.scss里面我有：

@import '../../../../node_modules/daterangepicker/daterangepicker.css';

但是我可以将其替换为：

@import '~daterangepicker/daterangepicker.css';

当我运行 npm run dev 时，我的 IDE 和 npm 仍然可以找到该文件。

显然第二种方法更简洁，我想坚持使用它，但是知道波浪号意味着在目录结构中向上 4 级并输入 node_modules 的逻辑在哪里？

【问题讨论】：

标签： node.js npm sass

【解决方案1】：

它是 webpack sass-loader。 Documentation 说：

因此，您可以从 node_modules 导入您的 Sass 模块。只需在它们前面加上 ~ 来告诉 webpack 这不是相对导入：
@import "~bootstrap/dist/css/bootstrap";

IDE 通常知道这些 webpack 特性。

如果它不是 webpack，您可能会使用其他类型的编译器，它很可能会重复该行为。

【讨论】：

我确实使用 webpack。谢谢Arseniy的解释。 ?