在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样式。

相关推荐
gb42152871 分钟前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go7 分钟前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠12 分钟前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼37 分钟前
Java 集合Collection—List
java·开发语言
aramae1 小时前
C++ -- 模板
开发语言·c++·笔记·其他
胡耀超1 小时前
4、Python面向对象编程与模块化设计
开发语言·python·ai·大模型·conda·anaconda
猫头虎-前端技术1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
一只小风华~1 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
索迪迈科技2 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法
十碗饭吃不饱2 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5