工程化:vite4+vue3里面的less预处理的mixin，when和伪元素的使用研究

最新推荐文章于 2023-07-10 14:42:00 发布
最新推荐文章于 2023-07-10 14:42:00 发布
阅读量211 收藏
点赞数
分类专栏： 移动端vant组件的深入研究 文章标签： less css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/130348552
版权
本文探讨了在Vite4和Vue3项目中使用Less作为预处理语言时，mixin和when条件语句的运用，以及如何处理CSS伪元素。在从scss迁移到less的过程中，作者指出两者在用法上的相似性和细节差异，并通过实例展示了less中的关键概念。
摘要由CSDN通过智能技术生成

本文的起因

项目的重构，之前的语法是scss,新项目选型选的less，两种基本的使用是差不多的，细节方面有很大的差异，今天拎出来重点的细说。。。

区别

  1. *.scss
    在这里插入图片描述
    在这里插入图片描述

  2. *.less
    在这里插入图片描述
    在这里插入图片描述

mixin

.bg-dp(@number: 0)
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite项目配置less全局样式
热门推荐
weixin_43575792的博客
02-09 1万+
vite项目使用less全局样式前言一、安装依赖二、使用步骤1.配置vite.config.js2.全局样式编写3.组件使用总结 前言 博主最近学习在vite项目中配置less，通过less去配置项目的全局样式，下面是配置步骤 一、安装依赖 首先项目中安装less和less-loader依赖 npm install less npm install less-loader 二、使用步骤 1.配置vite.config.js 在vite.config.js配置less全局样式，在additionalData
Vite4.2 +Vue3.2+Less实现主题切换功能
富朝阳的博客
06-27 3352
博主最近在重构自己的单页面SSR博客，打算添加换肤功能，众所周知，换肤功能已是一个很常见的功能。用户可以根据自己的喜好，设置页面的主题，从而实现个性化定制。这样用户体验度会大大提升。先看效果：博客用的Vite4.2构建，框架是Vue3.2，采用服务端渲染，样式使用了less，因此我打算使用less变量实现换肤功能。
Vite 优雅的引入less样式文件
qq_28421487的博客
04-20 2195
sourcePath:该处是你自己写的公共的less文件目录，该插件会自动去找，默认目录src/assets；lessEnabled:使用less解析，默认是 true；
Vue3 + Vite 使用 Less 配置
RR_chen的博客
08-12 7299
- 安装 less `npm install less -D` （Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 less） - 在 vite.config.js 中加入：
vue3使用less入门使用案例（webStrom）
qq_39123467的博客
07-10 508
less：css预处理语言。
vite+vue3动态模块化导入并使用pinia
03-25
在"vite+vue3动态模块化导入并使用pinia"的项目中，我们可以通过以下步骤实现动态模块化导入和使用Pinia： 1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
Vue3 是 Vue.js 框架的最新版本，引入了 Composition API 等重大改进，让代码更加模块化和易于管理。而 `import.meta.glob` 是 Vite 提供的一个强大特性，用于动态导入资源，尤其是适用于处理 Vue 组件的动态导入。 ...
项目技术栈：Vue3 + JavaScript + Vite4.zip
最新发布
04-03
Vue3是Vue.js框架的最新版本，它带来了许多性能优化和功能改进，JavaScript作为广泛使用的客户端脚本语言，为前端交互提供支持，而Vite4则是一个由Vue.js作者尤雨溪发起的新型构建工具，以其快速的开发环境启动和热...
vite2-vue3-admin:Vite2 + Vue3.0 +蚂蚁设计2.x
04-01
vite2-vue3-admin Vite2 + Vue3.0 +蚂蚁设计2.x 提示：可注册成功后登录 目录树 ├─public └─src ├─api ├─assets │ ├─font │ ├─icon │ ├─img │ └─svg ├─components │ └─global │ ...
VUE的mixins 与 Less的mixin
lemon_宁萌
06-26 493
VUE的mixins 与 Less的mixin-整理所用到的有关记录，以及了解，并没有涉及到一些原理等
vue项目：动态修改伪类选择器before中的属性值
weixin_44895537的博客
09-29 1493
背景：标签列表中标签明前面需要展示根据标签名自带的颜色 问题：颜色框是通过::before来生成的，现在的background是写死的，所以需要修改::before中的background属性 解决： 1，在css中使用变量 var()函数用于读取变量。 声明css变量的时候，变量名前面要加两根连词线（--） 2,根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置 注意：“--bgColor”不需要在data函数中声明 ...
vue2/vue3中样式scss的mixin用法
weixin_44727080的博客
02-10 2757
前言： 在vue2中我们使用scss的时候的一些方法挪移到vue3中，会出现一些问题，比如我们的配置文件都ok了，但是我们页面上使用@include wx() 会报错找不到这个mixin方法。 vue2中scss: 1、引入你的公共scss文件 2、放入把我们的mixin方法 // 宽高 @mixin wh($width, $height){ width: $width; height: $height; } // 圆角边框 @mixin border-radius($...
Vite中预处理器(如less)的配置
weixin_46769087的博客
12-16 7230
通过上一章节，我们学习了vite中如何对css行为进行配置，同时知道了它的第一个配置项css.modules。传送门：https://juejin.cn/post/7175366648659411000现在，我们来深入学习它的第二个可配置项-预处理器配置项。顾名思义，这个选项是用来配置less、scss、stylus等预处理器的。现在我们通过配置less默认选项，详细了解一下preprocessorOptions的配置用法。
Vue3 实用特性总结
Yu_Jian_Qt的博客
03-04 463
Vue3实用特性总结
vitepress（四）：引入vue组件
weixin_46463785的博客
01-07 3212
这节课的内容需要有前置的良好的Vue基础，如果你仅仅想搭建一个存放md文件的网站的话，可以不必学习后面的内容，当然如果你想个性化自己的站点，那么推荐你学习一下引用的方式和注意点，开始你的个性化之旅。
Vue CLI4 自动化引入 less 全局变量或 Sass、Stylus
RR_chen的博客
04-24 1306
在 Vue CLI4中：（注意看下版本，3版本不是此配置）若想在组件中使用 less文件中的变量、mixin等，若不全局引入，我们在每个组件中一个个引入，会非常麻烦。如： <style lang="less" scoped>@import '~@/assets/less/imports.less';若想在App.vue 导入，但会出错。设置全局引入(即自动化导入)：使用 webpack 的 style-resources-loader插件可自动化导入less.
vuecli4.0配置less全局变量
weixin_45450471的博客
12-30 1115
以下两种方式均可： ###1、引入less变量文件 module.exports = { css: { loaderOptions: { less: { globalVars: { hack: `true; @import '~@/assets/less/variables.less';` }, modifyVars: { 'theme-color': '#ff0000' }
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本篇文档详细介绍了如何进行全栈开发实战，主要结合了前端技术Vite3、Vue3、TypeScript (TS) 和 Ant-Design-Vue3，以及后端技术SpringBoot、MybatisPlus和MySQL。以下是关键知识点的总结： 1. **前端技术栈搭建** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值