react+less中使用动态路径（波浪线~的使用）

准备 webpack

一般我们都会先配置好 webpack ，以可以使用 @ 来代替 src 目录：

addWebpackAlias({ '@': resolve('src'), })

如果不会配置可以看这里：

《react不使用eject的配置方法（config-overrides复现vue项目全部配置）》

less 动态路径

在 less 中，使用 ~ 为前缀就会变成动态的，他默认会去寻找 node_modules 下的模块，也就是以 node_modules 为原点，所以你可以这么使用：

@import "~normalize.css";

于是就会将 normalize.css 这个库导入。

---

当我们配置了 webpack 的 @ 替代时，就可以这么使用：

background-image: url('~@/assets/images/map.png')

他就会去寻找 src/assets/images/map.png 。

---

那不加 ~ 到底会发生什么呢？

如果是相对路径，他自然就会以相对路径来寻找资源。

如果是 background-image: url('@/assets/images/map.png') ，他就会去寻找 ./@/assets/images/map.png' 。

---

波浪线除了动态路径的作用，还有延迟计算的作用，相信这个大家已经很熟悉了：

width: ~'calc(100% + 60px)' width: ~'calc(100vh + 60px)'

也就是告诉 less 先不要计算出结果，到了用户浏览器再由实际浏览器进行计算。