在 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
找对应的样式文件了