Vue3 + Quasar series-code configuration and error summary records (continuously updated)

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

Welcome the brothers and sisters passing by to give better opinions~~