在 webpack 中，一些 loader 会把不以 / 开头的绝对路径作为相对路径处理，如果需要使用模块路径，需要在路径前加一个波浪线 ～

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~

目前样式相关的几个 loader 都支持波浪线：

• css-loader
• less-loader
• sass-loader
• stylus-loader

@import导入样式文件时，路径前加上波浪线 ～，比如：

import “~bootstrap/less/bootstrap”;

就是告诉 webpack 以模块的方式去加载这个样式文件：

1. 去对应的 resolve.modules 定义的文件夹中去寻找对应的样式文件
2. 而 resolve.modules 往往都定义了 node_modules 这个文件夹
3. 所以就可以去 node_modules 找对应的样式文件了

参考

• ReactJS中的@import路径中~波浪线的含义和通过resolve的alias简化导入路径
• Vue2 模板中的图片地址如何使用 webpack 定义的别名?
• less-loader