vue@cli3中配置vant主题,引入主题文件时报错

Question

 css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          'hack': `true; @import "$src/assets/css/theme.less";`
        }
      }
    }
  } 

但是

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "$src/assets/css/mixin.scss";
        `
      },
      less: {
        modifyVars: {
          red: '#ccc',
          blue: '#3eaf7c',
          orange: '#f08d49',
          'text-color': '#111'
        }
      }
    }
  } 

这样直接修改确是可以的,请教这个写的有问题吗?和官网一样的啊
vant

只是我用的是ts, 用的 ts-import-plugin

Answer 1

要这样子

modifyVars: {
  hack: `true; @import "${path.join(
    __dirname,
    './assets/styles/vant-ui/variables.less'
  )}";`
}

Answer 2

您好，请问您这个问题解决了嘛？我也遇到了这个问题。

Answer 3

@静海孤城
`
vue.config.js
const tsImportPluginFactory = require('ts-import-plugin')

configureWebpack: (config) => {

// 使用ts-important-plugin 动态引入vant 
config.module = {
  rules: [
    // 配置新的 使用config的话 必须要将原来的和现在的合并,而且使用新的在后面覆盖旧的
    ...config.module.rules,
    {
      test: /\.(jsx|tsx|js|ts)$/,
      loader: 'ts-loader',
      options: {
        happyPackMode: true, // 打包相关
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [ tsImportPluginFactory( {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: name => `${name}/style/less` // 配置vant主题文件
          })]
        }),
        compilerOptions: {
          module: 'es2015'
        }
      },
      exclude: /node_modules/
    }
  ]
}

},

`

Answer 4

大佬，能看一下，你是怎么配置按需加载vant组件的吗，我也是用的vue+ts