app.scss如何知道〜foo是node_modules中的foo目录？

Question

我有一个Laravel项目，其中tags位于app.scss。

resources/assets/sass/frontend/在根目录中。

在node_modules里面，我有

app.scss

但是我可以将其替换为：

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

当我运行@import '~daterangepicker/daterangepicker.css';时，我的IDE和npm都可以找到该文件。

很明显，第二种方法更简洁，我想坚持使用，但是逻辑上哪里知道波浪号意味着目录结构和输入npm run dev上升4层 ？

Answer 1

它是webpack sass-loader。 Documentation说：

  

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

     

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

IDE通常会知道此类Webpack功能。

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