有些东西不记录一下,不久就忘了。
好记性不如烂笔头!

vite配置less全局变量

Less变量文件地址如下:

src/assets/styles/base.less

方法一

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
          javascriptEnabled: true,
          additionalData:  `@import "${path.resolve(__dirname, 'src/assets/styles/base.less')}";`
      }
  }
})

方法二

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
       less: {
         modifyVars: {
           hack: `true; @import (reference) "${path.resolve('src/assets/styles/base.less')}";`,
         },
         javascriptEnabled: true
       }
    }
  }
})


可能遇到的问题

在引入 path 时报错。

import path from ‘path’;

解决办法: 根据提示安装 @types/node

yarn add @types/node
Logo

前往低代码交流专区

更多推荐