当前位置: 首页 > news >正文

electron-vite_18Less和Sass共用样式指定

项目中可以封装less公用样式和方法,比如自动以滚动条样式、单行省略号、多行省略号、display:none等;

关于additionalData的配置生效,请在main.js中引入一个别的样式或vue组件中使用“<style lang=“scss”><style>”
在这里插入图片描述

找到electron.vite.config.ts添加less配置

1.设置alias别名’@': resolve(‘src/renderer/src’)
2.指定包含别名的路径additionalData: @import "@/assets/style/global.less";,
3.在main.tsx文件引入一个less文件; import ‘@/assets/style/reset.less’;
备注:不手动引入的话additionalData的配置不会生效;
其它方式:如果是其它框架比方说main.js或main.ts或

export default defineConfig({main: {},preload:{},renderer: {css: {preprocessorOptions: {less: {modifyVars: { // 更改主题: 用户覆盖一些基于Less的默认变量比方说一些组件库'primary-color': '#52c41a','link-color': '#1DA57A','border-radius-base': '2px'},// 禁用less主动添加"UTF-8"声明, 否则会导致多less文件合并可能导致一些问题charset: false,/* 全局样式: 原理就是在每个文件都引入这个样式,不在需要手动引入真实路径:src/renderer/src/assets/style/global.less*/additionalData: `@import "@/assets/style/global.less";`,// 允许 Less 中执行 JavaScript 表达式javascriptEnabled: true,}},},resolve: {alias: {'@renderer': resolve('src/renderer/src'),'@': resolve('src/renderer/src')}},}
})
http://www.dtcms.com/a/342341.html

相关文章:

  • 超级 APP:重构多平台运营生态,一站式解决用户与商家痛点
  • Java性能优化:JVM工具与Tomcat调优实战
  • 批量收藏Chrome浏览器中打开的多个标签页快捷方法
  • 12_Go语言项目架构与工程实践
  • 手机惊魂
  • 《用餐》,午餐食堂即景小诗分享(手机/小视频/光盘/养生)
  • mysql第四章使用DQL命令查询数据(二)
  • MinerU:重新定义PDF智能提取的开源利器
  • PDF翻译软件哪个好?用对工具翻译无障碍
  • 计算机视觉第一课opencv(三)保姆级教学
  • 微信小程序基础Day1
  • Ubuntu 22.04 安装tensorrt
  • Building Systems with the ChatGPT API 使用 ChatGPT API 搭建系统(第五章学习笔记及总结)
  • Vue3源码reactivity响应式篇之Map、Set等代理处理详解
  • OpenCVSharp 核心功能模块详解:从基础操作到实战应用
  • 2025-08-21 Python进阶5——类和对象
  • Visual Studio 在机台上远程调试详细教程
  • LeetCode 反转链表
  • imx6ull-驱动开发篇33——platform 平台驱动模型
  • 【运维进阶】Shell 变量
  • Docker--Docker网络
  • 【学习笔记】网络安全专用产品类别与参考标准
  • 【问题思考】二分查找对比三分查找(任意点查找)的优越性(熵的角度)【gemini完成】
  • 语义分割开山之作:FCN网络从入门到精通
  • 概率论基础教程第5章 连续型随机变量(三)
  • 【复杂网络技术】什么是图神经网络?
  • Elasticsearch 面试题完整笔记
  • 大数据面试常见问题
  • 【网络】http 协议中 Vary 标头的作用
  • UI自动化测试