在现代前端项目中，特别是在使用webpack等构建工具时，~@ 是一种约定的写法，用于处理模块化的CSS或预处理器（如Less、Sass）文件的导入。
这里的 ~@/commonStyles/index.less 表示：
~符号：在一些构建系统中（尤其是webpack），此符号告诉构建工具这是一个模块请求，而非一个相对于当前文件的相对路径。它会解析为node_modules目录下的包或者是配置了alias的路径。@：通常是指项目的src目录或者其他配置过的别名指向的基础路径。具体指向哪里取决于项目配置，例如在Vue CLI或者Create React App中，@可能被配置为指向项目源码的根目录。
因此，~@/commonStyles/index.less 导入的是从项目src目录或相应别名路径下找到的 commonStyles 文件夹中的 index.less 样式文件。
这样做的好处是可以利用构建工具对资源的模块化管理和解析能力，实现更灵活和高效的文件引用。
可以去掉上边的~吗？
是否可以去掉 ~ 符号取决于项目的具体配置和构建工具（如webpack）对Less文件导入的支持。
如果项目中已经正确设置了处理Less文件的loader，并且该loader能够自动识别并处理相对路径下的Less模块，那么在某些情况下是可以去掉 ~ 符号的。例如：
@import '@/commonStyles/index.less';
然而，使用 ~ 符号有助于避免与常规相对路径引入混淆，同时确保能正确解析位于node_modules或通过别名配置的目录中的Less文件。为了保证代码的可移植性和一致性，建议保留 ~ 符号，尤其是在团队协作或大型项目中。当然，这需要确保项目已正确配置了相应的webpack loader或其他构建工具配置来支持这种写法。