css中@import 路径中的波浪号~

在接手公司的一个原有项目时发现在.less文件中存在以下两种引用写法

@import '~antd/lib/style/themes/default.less';

@import "~@/css/mixin-classes";

其中第一种引用是ant-design官方提供的写法

那么波浪线的作用其实就是使～后面变成一个变量

例如

@import "~@/css/mixin-classes";

且在webpack配置中添加了alias

resolve:{
    extensions:['.js','.json','.web.js','.less'],
    modules:['node_modules'],
    alias:{
        '@':path.resolve(__dirname,'../src')
    }
}

那么@也就代表了在webpack中定义的别名路径。

而～antd也就同理会到node_module中去进行寻找

@import '~antd/lib/style/themes/default.less';
==
@import '.../node_modules/antd/lib/style/themes/default.less'

那么到底～后面加变量到底是谁的规则呢？是css @import的规则？当然不是了，它是webpack的css-loader的语法，看下图。

其中需要注意的是如果在webpack插件中应用了postcss-import插件那么千万不要加～。因为如下图，postcss-import对模块的导入不需要加波浪号，如果加了的话就会报错哦。

但是如果想用别名又引入postcss-import的话我们可以给postcss-import加上解析规则

...
postcss-import:{
    resolve(id){
        if(id.charAt(0) === '~'){
            return id.substr(1)
        } else {
            return id
        }
    }
}