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