当前位置：首页 > backend >正文

electron-vite_18Less和Sass共用样式指定

backend 2025/8/23 13:59:12

项目中可以封装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')}},}
})