[Bug Report] vue-cli 主题不生效

[wty521]

设备 / 浏览器

浏览器

Vant 版本

2.12.20

Vue 版本

2.6.11

重现链接

https://github.com/youzan/vant/

描述问题

按需加载样式 配置主题不生效 样式有但主题不生效 babel.config.js

[
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`
      },
      'vant'
    ]

vue.config.js

require('dotenv')
const path = require('path')
const apiMocker = require('mocker-api')
const { merge } = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')

function usejinx () {
  const argv = process.argv.slice(2) || []
  if (argv.indexOf('--jinx') >= 0) {
    return true
  }
  return false
}
const publicPath = process.env.NODE_ENV === 'production' && !usejinx()
  ? '//ali.static.yximgs.com'
  : '/'
module.exports = {
  publicPath,
  lintOnSave: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            red: '#111',
            hack: `true; @import "${path.resolve(__dirname, './src/assets/vant.theme.var.less')}";`
          }
        }
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        })
        return options
      })
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/assets/variables.less'),
      ]
    }
  },
  devServer: {
    port: 62021,
    proxy: {
      '/rest': {
        target:
          process.env.VUE_APP_DEV_PROXY ||
          'https://master--suixintui.jinx.corp.kuaishou.com/',
        headers: {
          Cookie: process.env.VUE_APP_PROXY_COOKIE || ''
        }
      }
    },
    before: app => {
      if (process.env.VUE_APP_USE_MOCK === 'true') {
        apiMocker(app, require('./mock/index.js'))
      }
    },
    disableHostCheck: true
  }
}

[chenjiahan]

请参考官方示例仓库，里面有主题定制的 demo

https://github.com/youzan/vant-demo/tree/master/vant