.vue文件中style标签引用原生css
在 css 文件，如 less, sass, stylus 中，使用 @import "@/style/theme" 的语法引用相对 @
的目录确会报错，"找不到 '@' 目录"，说明 webpack 没有正确识别资源相对路径。
分析
原因是 css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias ，所以会报找不到 @ 目录。
解决
- 为 css-loader 添加 ailas 的路径
- 在引用路径的字符串最前面添加上 ~ 符号，Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了。
总结
~ 视为模块解析是 webpack 做的事，不是 css-loader 做的事。
各类非 js 直接引用（ import require ）静态资源，依赖相对路径加载问题，都可以用 ~ 语法完美解决；
例如 css module 中： @import "~@/style/theme"
css 属性中： background: url("~@/assets/xxx.jpg")
html 标签中： <img src="~@/assets/xxx.jpg" alt="alias">
注意
如果使用了postcss的插件postcss-import，会导致 ~ 失效
