Cant get styles to load

[FuriousLlama]

Followed the steps outlined. Components seem to be loaded, but the styles are missing or not being rendered.

<q-button>Primary</q-button>
      <q-button theme="secondary">Secondary</q-button>
      <q-button theme="link">Link</q-button>
      <q-button loading>Primary</q-button>

[cheesytim]

Hi, @FuriousLlama, can you show your full setup code?

[FuriousLlama]

Sure thing @Tim152 :
package.json

{
  "name": "my-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@qvant/qui-max": "0.18.0",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "typescript": "~4.5.5"
  }
}

main.ts

import { createApp } from "vue";
import Qui from "@qvant/qui-max";
import '@qvant/qui-max/styles';

import App from "./App.vue";
import router from "./router";
import store from "./store";


const app = createApp(App);
app.use(Qui);

app.use(store);
app.use(router);

app.mount("#app");

Everything else is the default of the vue-cli setup.
Please let me know if you need any additional information

[cheesytim]

@FuriousLlama
it's working in sandbox https://codesandbox.io/s/upbeat-wood-1egosc

Do you have some console/app errors ?
Have you tried reinstall node_modules with removing package.lock | yarn.lock ?

[mathis-la-debrouille]

Hi i'm having an issue of the same type, css isnt loadind, here are my setup files :
package.json :

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@qvant/qui-max": "^0.19.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "^1.80.6",
    "sass-loader": "^16.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

main.js :

import App from './App.vue';
import { createApp } from 'vue';
import Qui from '@qvant/qui-max';
import '@qvant/qui-max/styles';

const app = createApp(App);
app.use(Qui);
app.mount('#app');

and app.vue :

<template>
  ayo
  <q-input v-model="dzdzr"/>
  <q-button>dzd</q-button>
</template>
<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    return { value };
  }
};
</script>

here is the render :

I already tried to delete pkg lock and reinstall node module

[mathis-la-debrouille]

I even completly duplicated you version here : https://codesandbox.io/s/upbeat-wood-1egosc and have this render :

Maybe local development so the point is on installation i think

[mathis-la-debrouille]

'On my version'
I'm sure components are loaded, at inspect we can see the html code is right :

but the style is empy, so css/scss (idk which is used) is not linked

[mathis-la-debrouille]

i ended rolling back on the old in style per component import see :

<style>
@import '@qvant/qui-max/styles';

</style>

I had to resort to the old-school style import method instead of the one outlined in the documentation. To this day, I still don’t know why it doesn’t work as described.