前端工程化中Less第三方库中@Import的“~”和“@”用法

寒冰摄影

在前端工程化开发中经常会用到less第三方css库，其中@import指令中的~符号和@符号用于指定模块化路径，常见于Webpack等构建工具中。下面介绍使用方法：

路径解析规则：

~符号：表示模块请求，构建工具会将其解析为node_modules目录或配置的别名路径 。 ‌

@符号：通常指向项目源码根目录（如src），具体由项目配置决定 。 ‌

示例方法：

1、@import "~xxx/commonStyles/index.less";

引用node_modules中xxx包下的commonStyles文件夹导入index.less文件。

2、@import "@/commonStyles/index.less";

引用项目源码根目录下的commonStyles文件夹导入index.less 文件。 

适用场景：

项目中使用了Webpack等构建工具，且配置了路径别名（如@指向src目录） 。 ‌

需要导入非相对路径的模块化文件（如第三方库或项目内部模块） 。

来源：https://www.cnblogs.com/abc-x/p/19199148