路径别名与 css 背景图设置
在 CSS 中，通常使用 @符号作为路径别名，而在 Webpack 构建工具中，却要求背景图片的资源路径采用 ~@。这是什么原因呢？
究其本质，这不是 CSS 要求的，而是 Webpack 中的 css-loader 所规定的。css-loader 负责处理 CSS 文件，当它遇到 ~ 符号时，会将其替换为真实的相对路径。
~ 符号的选择并没有特殊原因，它只是 css-loader 作者选定的特定字符。如果当初选择的是 ^，那么我们现在需要写的路径就是 ^@/assets/image.jpg。
为什么只有 css-loader 需要使用 ~ 符号，而 JS 中却没有此要求？这是因为 css-loader 采用了一种更合理的设计，以避免路径别名与实际文件目录的歧义。
立即学习“前端免费学习笔记（深入）”；
在 JS 中，路径别名可以随意定义，而 css-loader 则引入了一个特殊的字符 ~ 来指定别名，而其他字符则表示普通路径。这有效消除了歧义。
此外，css-loader 也允许导入位于 node_modules 下的模块文件。这在 JS 中是内置支持的，但 CSS 中原本没有这样的功能，css-loader 通过 ~ 符号来明确指示 Webpack 从 node_modules 中加载资源。
以上就是CSS背景图路径别名：为什么Webpack中需要~@而JS不需要？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2843900.html
