在前端工程化开发中经常会用到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目录) 。
需要导入非相对路径的模块化文件(如第三方库或项目内部模块) 。