scss中的import加波浪号是什么意思？

Question

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";
@import "/assets/css/primeng-themes-my/primeng.min.css";
@import "/assets/css/primeng-themes-my/themes/bootstrap-my/theme.css";

前两个import的文件地址前面加入波浪线(~)是什么意思啊？

Answer 1

node_modules 目录下面的

Answer 2

前面加 ~ 表示你后面的值为 alias, 然后就会去 webpack alias 配置中找相应的值, 然后拼接成最后的地址, 例如

resolve: {
    alias: {
        "bootstrap": "xxx/xxx2",
        "font-awesome": "yyy/yyy2",
    }
}

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

等同于

@import "xxx/xxx2/bootstrap/dist/css/bootstrap.min.css";
@import "yyy/yyy2/font-awesome/css/font-awesome.min.css";

Answer 3

开发环境是什么？

只能从路径中推断，是第三方库的根目录。
从 /assets/css/ 看，是类似/src下的目录结构

Answer 4

答案在这 https://segmentfault.com/a/11...

Answer 5

scss @import "~scss/vue.scss"
会首先从webpack alias 配置中找相应的值, 然后拼接成最后的地址

当不存在alias 配置的时候，才会去node_modules 中拿

个人从实际项目中发觉。如果错了，希望告知。

Answer 6

在linux中～代表的是系统的用户目录位置，scss中的～大致应该是相同的意思，不过代表的可能就是模块目录位置

Answer 7

@import "xxx/xxx2/bootstrap/dist/css/bootstrap.min.css";
@import "yyy/yyy2/font-awesome/css/font-awesome.min.css";