在 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 以模块的方式去加载这个样式文件:
去对应的 resolve.modules 定义的文件夹中去寻找对应的样式文件
而 resolve.modules 往往都定义了 node_modules 这个文件夹
所以就可以去 node_modules 找对应的样式文件了
参考
ReactJS 中的 @import 路径中~ 波浪线的含义和通过 resolve 的 alias 简化导入路径
Vue2 模板中的图片地址如何使用 webpack 定义的别名?
Less-loader
来源: http://www.jianshu.com/p/5587d8bcd187