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

shawnuf
  • 37
@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的文件地址前面加入波浪线(~)是什么意思啊?

回复
阅读 10.3k
7 个回答
✓ 已被采纳

node_modules 目录下面的

前面加 ~ 表示你后面的值为 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";

开发环境是什么?

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

gzyzwx
  • 2
新手上路,请多包涵

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏