less import no support webpack alias '~'

[Ariesly]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

how to config it?
vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import path from 'path';

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  build: {
    rollupOptions: {
      plugins: [
      ]
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          "primary-color": "#1DA57A",
          "link-color": "#1DA57A",
          "border-radius-base": "2px",
        },
        javascriptEnabled: true,
      },
    }
  },
  optimizeDeps: {
    include: ["lodash", 'ant-design-vue', '@ant-design-vue/use']
  },
  alias: {
    '@': pathResolve('./src'),
    '~': pathResolve('./node_modules'),
  }
})

Reproduction

System Info

• vite version:4.0.0
• Operating System: macOS 11.2.1 20D74
• Node version: v14.15.5
• Package manager (npm) and version: 7.5.4

Logs (Optional if provided reproduction)

11:31:36 AM [vite] Internal server error: '~ant-design-vue/es/style/themes/default.less' wasn't found. Tried - /antdv-ts/src/style/~ant-design-vue/es/style/themes/default.less,node_modules/~ant-design-vue/es/style/themes/default.less,npm:https://~ant-design-vue/es/style/themes/default.less,~ant-design-vue/es/style/themes/default.less
  Plugin: vite:css
  File: /antdv-ts/src/style/index.less
  1  |  @import '~ant-design-vue/es/style/themes/default.less';
     |  ^
  2  |  
  3  |  #app {
      at less (/antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:18246:33)
      at async compileCSS (/antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:17942:34)
      at async TransformContext.transform (/antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:17630:50)
      at async Object.transform (/antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:45898:30)
      at async transformRequest (/antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:61468:29)
      at async /antdv-ts/node_modules/vite/dist/node/chunks/dep-d13406fa.js:61570:32 (x2)

[andrew0]

Try replacing your alias option with this:

export default defineConfig({
  // ...
  resolve: {
    alias: [
      { find: /^~/, replacement: '' }
    ],
  }
});