less 中的～什么意思

前面加 ~ 表示你后面的值为 alias, 然后就会去 webpack alias 配置中找相应的值, 然后拼接成最后的地址, 例如

resolve: {
    alias: {
        "bootstrap": "xxx/xxx2",
        "font-awesome": "yyy/yyy2",
    }
}

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

等同于

@import "xxx/xxx2/bootstrap/dist/css/bootstrap.min.css";
@import "yyy/yyy2/font-awesome/css/font-awesome.min.css";

参考文档https://segmentfault.com/q/1010000010879017

在使用rollup打包报错，报错信息如下

发现是不识别less中的~导致的

解决问题

import NpmImport from 'less-plugin-npm-import';
import postcss from 'rollup-plugin-postcss';

export default {
  ......
  plugins: [
    postcss({
      use: [['less', {
        plugins: [new NpmImport({prefix: '~'})],
      }]],
    }),
 ]
}

参考文档

https://github.com/egoist/rollup-plugin-postcss/issues/140