@import "~element-ui" 这样的地址node是如何定位的？

Question

$--color-text-regular: #fff;

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

因为使用的 elementUI 有些字体颜色不是很满意，就按照文档中说明的第二种方法进行修改，对于其中说到的

这样的import不是很理解。

Answer 1

webpack解析地址的时候发现~开头会帮你按照模块解析。这个工作基本上是webpack做的。
参考1
参考2

Answer 2

sass-loader

webpack 提供一种解析文件的高级的机制。sass-loader 使用 node-sass 的 custom importer 特性，将所有的 query 传递给 webpack 的解析引擎(resolving engine)。只要它们前面加上 ~，告诉 webpack 它不是一个相对路径，这样就可以 import 导入 node_modules 目录里面的 sass 模块：

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

重要的是，只在前面加上 ~，因为 ~/ 会解析到主目录(home directory)。webpack 需要区分 bootstrap 和 ~bootstrap，因为 CSS 和 Sass 文件没有用于导入相关文件的特殊语法。@import "file" 与 @import "./file"; 这两种写法是相同的

Answer 3

这是他们封装好的方法，直接去找对应的目录文件了