vite 里面怎么使用sass和less

Vite 支持使用 Sass 和 Less 预处理器，你可以在 Vite 配置文件中添加相应的插件来实现。

使用 Sass：

1. 安装 sass 插件

npm install -D sass

2. 在 Vite 配置文件中添加插件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import sass from 'sass'

export default defineConfig({
  plugins: [
    vue(),
    {
      apply: 'build',
      name: 'sass',
      async load(id) {
        if (id.endsWith('.scss')) {
          const { css } = await sass.render({ file: id })
          return css
        }
      },
    },
  ],
})

3. 在组件中引入 .scss 文件

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style lang="scss">
.app {
  color: red;
}
</style>

使用 Less：

1. 安装 less 插件

npm install -D less

2. 在 Vite 配置文件中添加插件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import less from 'less'

export default defineConfig({
  plugins: [
    vue(),
    {
      apply: 'build',
      name: 'less',
      async load(id) {
        if (id.endsWith('.less')) {
          const { css } = await less.render(await fs.readFile(id, 'utf8'))
          return css
        }
      },
    },
  ],
})

3. 在组件中引入 .less 文件

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style lang="less">
.app {
  color: blue;
}
</style>