How does vite inject less variables globally,like the 'style-resources-loader' plugin

[mnko-qing]

hi：
When I use less to write the style, I want to inject less variables into vite.config.ts globally, just like the 'style-resources-loader' plugin.

pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, "./src/theme/color.less")],
}
},

What should I do, please?

[OneMoreJack]

Heres my vite.config.ts. But I use scss.

const fs = require('fs')
const path = require('path')
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

const getScssAdditional = (...paths) => {
  return paths.reduce((acc, curr) => {
    return acc + fs.readFileSync(curr, 'utf-8')
  }, '')
}

export default defineConfig({
  plugins: [vue()],

  alias: {
    '@': path.resolve(__dirname, 'src')
  },

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: getScssAdditional(
          'src/style/variables.scss',
        )
      }
    }
  } 
})

[mnko-qing]

Problem solved. Thank you!

[mnko-qing]

Problem solved. Thank you!

[kyoukhana]

How did you resolve this with LESS loading less variables

[gaokun]

@kyoukhana additionalData: `@import "./src/style/config.less";`

[gaokun]

@JackLiR8 Thanks for your answer.

I am stuck in this about mutiple entry points.

My config:

  build: {
    rollupOptions: {
      input: {
        front: resolve('pages/front.html'),
        admin: resolve('pages/admin.html'),
      },
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: (source, filename) => {
          const configFile = filename.includes('page-front')
            ? '@import "./src/page-front/style/config.less";'
            : '@import "./src/page-admin/style/config.less";';
          return `${configFile} ${source}`;
        },
      },
    },
  },

But I have common components under src/components, I can't tell them with filename.
I assume that we can use env or some flag right?

Could you help me to out of this?

Thanks in advance.
Ken

[standbyoneself]

Is there a solution if I use css modules + postcss, not sass/less/stylus?