vite2+vite-plugin-style-import css.preprocessorOptions.less.modifyVars定义的变量不生效

[CaiPeng1989]

No description provided.

[anncwb]

vite.config.ts

{
 css: {
      preprocessorOptions: {
        less: {
         modifyVars:{},
         javascriptEnabled: true,
        },
      },
    },
 plugins:[{
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: (name) => {
              return `ant-design-vue/es/${name}/style/index`;
            },
          },]
}

[anncwb]

这样写可以生效

[CaiPeng1989]

import {
  defineConfig
} from 'vite'

import {
  resolve as pathResolve,
  join as pathJoin
} from 'path'

import {
  createVuePlugin
} from 'vite-plugin-vue2'

import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'
import styleImport from 'vite-plugin-style-import'

const isProd = process.env.NODE_ENV === 'production'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          // hack: `true; @import "${pathResolve(__dirname, './src/less/vant.theme.less')}"`
          hack: `true; @import "${pathJoin(__dirname, './src/less/vant.theme.less')}"`
        }
      }
    }
  },

  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: ''
      },
      {
        find: '@',
        replacement: pathResolve(__dirname, './src')
      }
    ]
  },

  plugins: [
    createVuePlugin({
      jsxOptions: {
        compositionAPI: true
      }
    }),

    vueJsx(),

    legacy({
      targets: ['defaults', 'not IE 11']
    }),

    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: isProd
            ? (name) =>`vant/es/${name}/style/less`
            : null
        }
      ]
    })
  ],

  server: {
    force: true
  }
})

原来是需要 path.join 而不是 path.resolve，现在可以了。

[CaiPeng1989]

modifyVars: {
  hack: `true; @import "${pathJoin(__dirname, './src/less/vant.theme.less')}"`
}

styleImport({
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: isProd
        ? (name) =>`vant/es/${name}/style/less`
        : null
    }
  ]
})

if (import.meta.env.DEV) {
  import('vant/lib/index.less')
}

vant2 dev prod 都可以
vant3 dev可以 prod 不行

[anncwb]

{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => {
return vant/es/${name}/style/index;
},
},

[wozien]

modifyVars: {
  hack: `true; @import "${pathJoin(__dirname, './src/less/vant.theme.less')}"`
}

styleImport({
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: isProd
        ? (name) =>`vant/es/${name}/style/less`
        : null
    }
  ]
})

if (import.meta.env.DEV) {
  import('vant/lib/index.less')
}

vant2 dev prod 都可以
vant3 dev可以 prod 不行

我的prod环境也是不行，请问大佬解决了吗？

[wozien]

if (import.meta.env.DEV) {
import('vant/lib/index.less')
}

如果生产环境不引入的话，好像主要主题不生效的