Vue Nuxt.js 使用 VantUI 自动按需引入组件和定制主题文件覆盖的配置方法

编辑 nuxt.config.js 文件

const path = require('path')

export default {
  build: {
    babel: {
      plugins: [
        // VantUI 自动按需引入组件配置
        [
          'import',
          {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: name => `${name}/style/less` // 指定样式路径
          },
          'vant'
        ]
      ]
    },
    loaders: {
      // VantUI 定制主题配置
      less: {
        javascriptEnabled: true, // 开启 Less 行内 JavaScript 支持
        modifyVars: {
          hack: `true; @import "${path.join(
            __dirname,
            './assets/styles/vant-ui/variables.less'
          )}";`
        }
      }
    }
  }
}