简介
说明
本文介绍CSS、Sass、Scss的import中~（波浪线）的作用。
官网网址
处理资源路径 | Vue Loader
解析(Resolve) | webpack 中文文档
css-loader | webpack 中文文档
~ 概述
引用自Vue官网
资源 URL 转换会遵循如下规则：
- 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
- 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
- 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。
- 这意味着你可以用该特性来引用一个 Node 依赖中的资源：<img src="~some-npm-package/foo.png">
- 如果路径以 @ 开头，也会被看作模块依赖。
- 如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。一般会将 @ 指向 /src。
尤大是这样说的：
vue-html-loader和css-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 ~
用法1：别名（alias）
说明
如果路径以 ~ 开头，其后的部分将会被看作模块依赖。可以给路径配置别名，比如：将 @ 指向 /src。这样一来，@import "~@/xx/yy"; 实际对应的就是：@import "/src/xx/yy";
示例
Xxx.vue
<template>
<!-- 略 -->
</template>
<script>
<!-- 略 -->
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
</style>
Scss文件：
用法2：模块
官网网址
解析(Resolve) | webpack 中文文档
用法
@import导入样式文件时，路径前加上波浪线 ～，比如：
import “~bootstrap/less/bootstrap.less”;
就是告诉 webpack 以模块的方式去加载这个样式文件：去对应的 resolve.modules 定义的文件夹中去寻找对应的样式文件。
配置详解
配置方法（webpack.config.js）：
module.exports = {
//...
resolve: {
modules: ['node_modules'],
},
};
告诉 webpack 解析模块时应该搜索的目录。
绝对路径和相对路径都能使用，它们之间有一点差异。
通过查看当前目录以及祖先路径（即 ./node_modules, ../node_modules 等等）， 相对路径将类似于 Node 查找 'node_modules' 的方式进行查找。
使用绝对路径，将只在给定目录中搜索。
如果想添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索，方法如下：
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
};
