前端工程化中Less第三方库中@Import的“~”和“@”用法
<p>在前端工程化开发中经常会用到less第三方css库，其中@import指令中的~符号和@符号用于指定模块化路径，常见于Webpack等构建工具中。下面介绍使用方法：</p><h3>路径解析规则：</h3>
<p><code>~</code>符号：表示模块请求，构建工具会将其解析为node_modules目录或配置的别名路径 。 </p>
<p><code>@</code>符号：通常指向项目源码根目录（如src），具体由项目配置决定 。 </p>
<h3>示例方法：</h3>
<p>1、<code>@import "~xxx/commonStyles/index.less";</code></p>
<p>引用node_modules中xxx包下的<code>commonStyles</code>文件夹导入<code>index.less</code>文件。</p>
<p>2、<code>@import "@/commonStyles/index.less";</code></p>
<p>引用项目源码根目录下的<code>commonStyles</code>文件夹导入<code>index.less</code> 文件。 </p>
<h3>适用场景：</h3>
<p>项目中使用了Webpack等构建工具，且配置了路径别名（如<code>@</code>指向<code>src</code>目录） 。 </p>
<p>需要导入非相对路径的模块化文件（如第三方库或项目内部模块） 。</p><br><br>
来源：https://www.cnblogs.com/abc-x/p/19199148
頁:
[1]