在Vue3 + Vite项目中使用less

码农键盘上的梦2024-02-23 13:42

在Vue3 + Vite项目中使用less，需要安装less和less-loader两个依赖。

首先，在项目根目录下执行以下命令安装less和less-loader：

bash 复制代码

npm install less less-loader --save-dev

安装完成后，在vite.config.js配置文件中添加以下代码：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

这样就完成了less的配置。你可以在Vue组件中直接使用less语法编写样式了，例如：

vue 复制代码

<template>
  <div class="container">
    <h1 class="title">Hello World</h1>
  </div>
</template>

<style lang="less" scoped>
.container {
  background-color: red;
}

.title {
  color: blue;
}
</style>

注意，如果你使用了scoped属性，需要在style标签中添加lang="less"来指定使用less语法。如果没有使用scoped属性，可以直接在style标签中编写less样式。