cssPreprocessOptions less modifyVars Invalid modification

[yoonasy]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

this is modify to vantUI theme variable. less import not work.

vant.theme.var.less

@import './default.less';

// vant主题变量参考 https://github.com/youzan/vant/blob/dev/src/style/var.less

// componentNz
@text-color: #theme[color];
@border-color: #theme[color-border];

// button
@button-primary-background-color: #theme[color-primary];
@button-primary-border-color: #theme[color-primary];

@button-info-background-color: #theme[color-500];
@button-info-border-color: #theme[color-500];

// checkbox
@checkbox-checked-icon-color: #theme[color-primary];

  cssPreprocessOptions: {
    less: {
      modifyVars: {
        // 'button-primary-background-color': 'red',
        hack: `true; @import "src/assets/styles/themes/vant.theme.var.less";`,
      },
      javascriptEnabled: true,
    },
    scss: {
      additionalData: '@import "src/assets/styles/vars.scss";',
    },
  },

In this less options, no work，in vue.config.js is work.

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.

A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will be closed immediately.

System Info

• required vite version:vite v1.0.0-rc.9
• required Operating System:mac os
• required Node version:
• Optional:
  • npm/yarn version
  • Installed vue version (from yarn.lock or package-lock.json)
  • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[yoonasy]

relative path to scss is work. @import "src/assets/styles/vars.scss";

so i think less import path is also like this

[Wushq]

it work if you config like this

[yoonasy]

@Wushq ok, thank u, but still no substitution variable

modifyVars: {
        hack: `true; @import "${join(
          __dirname,
          './src/assets/styles/themes/vant.theme.var.less'
        )}";`,
      },

"vite": "^1.0.0-rc.9", "less": "^3.12.2", "sass": "^1.29.0", "vue": "^3.0.2", "vite-plugin-html": "^1.0.0-beta.2", "vite-plugin-mock": "^1.0.6", "vite-plugin-purge-icons": "^0.4.4", "vite-plugin-pwa": "^0.1.3",

I will try again

[yoonasy]

Oh, sor, I found the problem, I dated multiple compiled css files import 'vant/lib/index.css'

[yoonasy]

@Wushq hi, How do you import vant Less on demand

[ShookLyngs]

it work if you config like this

i did the same but its still not working.

[xianyulli]

Has this problem been solved? I don't see a credible result

[yunsii]

Done like this (Vite 2.x):

export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { 'primary-color': '#13c2c2' },
        javascriptEnabled: true,
      },
    },
  },
});

See more about my config pinyin/vite.config.ts

CC @ShookLyngs @lixianyu-icon

[myopenresources]

` // 第零步 在assets下创建/less/overwrite/overwrite.less

// 第一步 import { resolve } from 'path';

// 第二步 function pathResolve(dir: string) { return resolve(__dirname, '.', dir); }

// 第三步 css: { preprocessorOptions: { less: { modifyVars: { hack: true; @import "${resolve( './src/assets/less/overwrite/overwrite.less' )}";, } , javascriptEnabled: true
} } }, `