electron-vite_18Less和Sass共用样式指定

前端进阶者2025-08-21 14:06

项目中可以封装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或<style>

bash 复制代码

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')
	      }
	    },
	}
})