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