1. Vue3 + Quasar series-code configuration packaging without hash suffix
厉hash
https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
2. Vue3 + Quasar change theme background
The style of quasar is different from other framework modifications. We need to use dynamic methods to make changes. Generally speaking, there are two options for theme modification.
Option One:
- Documents required to modify the style:
- Here are instructions for style modification: https://quasar.dev/style/color-palette#how-it-works
- There are tons of default style declarations here: https://quasar.dev/style/sass-scss-variables
Without further ado, let’s go straight to the code:
<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { setCssVar } from 'quasar';
const colorStyles = [
{
name: 'primary',
color: '#e0301e',
},
{
name: 'secondary',
color: '#d54800',
},
{
name: 'positive',
color: '#000',
},
{
name: 'accent',
color: '#000',
},
{
name: 'info',
color: '#111',
},
];
export default defineComponent({
name: 'App',
mounted() {
colorStyles.forEach((element) => {
setCssVar(element.name, element.color);
});
},
});
</script>
Option II:
- Create a new file: src\css\quasar.variables.scss
- Write the following code:
$primary : #1976D2;
$secondary : #26A69A;
$accent : #9C27B0;
$dark : #1D1D1D;
$positive : #21BA45;
$negative : #C10015;
$info : #31CCEC;
$warning : #F2C037;
If the above two methods are mixed, the code of plan one will replace the duplicate color of the code of plan two~~~
Everyone is welcome to point out areas that need correction in the article~
There is no end to learning and win-win cooperation