app.scss 如何知道 ~foo 是 node_modules 中的 foo 目录?

Question

我有一个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仍然可以找到该文件。

显然，第二种方法要干净得多，我想坚持下去，但是知道波浪号意味着在目录结构和输入node_modules中向上移动 4 级的逻辑在哪里？

Answer 1

它是 webpack sass-loader。文档 说：

因此，您可以从node_modules导入 Sass 模块。只需在它们前面加上一个~，告诉webpack这不是一个相对的导入：

@import "~bootstrap/dist/css/bootstrap";

IDE 通常都知道这样的 webpack 功能。

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