在前端工程化開發中經常會用到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目錄） 。 ‌

需要導入非相對路徑的模塊化文件（如第三方庫或項目內部模塊） 。