在Vue3 + Vite项目中使用less

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

首先,在项目根目录下执行以下命令安装lessless-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样式。

相关推荐
万邦科技Lafite1 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied3 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
爱吃小胖橘3 小时前
Unity资源加载模块全解析
开发语言·unity·c#·游戏引擎
千里镜宵烛5 小时前
Lua-迭代器
开发语言·junit·lua
拉不动的猪5 小时前
函数组件和异步组件
前端·javascript·面试
渡我白衣5 小时前
C++ 同名全局变量:当符号在链接器中“相遇”
开发语言·c++·人工智能·深度学习·microsoft·语言模型·人机交互
淮北4945 小时前
html + css +js
开发语言·前端·javascript·css·html
源码_V_saaskw6 小时前
JAVA国际版二手交易系统手机回收好物回收发布闲置商品系统源码支持APP+H5
java·开发语言·微信·智能手机·微信小程序·小程序
java1234_小锋6 小时前
PyTorch2 Python深度学习 - PyTorch2安装与环境配置
开发语言·python·深度学习·pytorch2