Vue Components Styles not applying-CodePudding

This is my main container component,

<template>
  <div >
    <slot />
  </div>
</template>

This is my topbar component,

<template>
  <!-- top bar with back component -->
  <div >
    <div ><i ></i></div>

    <div >
      <div >Management</div>

      <div ></div>

      <div >Products</div>
    </div>
  </div>
  <!--End top bar with back component -->
</template>

This is my product component (With main container & top bar)

<template>
 <Main>
  <Topbar />
 </Main>
</template>

<script setup>
import Main from "../components/Main.vue";
import Topbar from "../components/Topbar.vue";
</script>

Here my CSS not working I have imported all my CSS files into the main HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/negus.css">
    <link rel="stylesheet" href="assets/css/all.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <div id="app"></div>

    <script src="assets/scripts/jQuery.min.js"></script>
    <script src="assets/scripts/jQuery-resize.js"></script>
    <script src="assets/scripts/script.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

It should look like this,

But it look like this,

I don't know why my CSS is not working. Appreciate it if somebody can help. Thanks

CodePudding user response：

Try importing those CSS files in your App.vue like this-

<style>
 @import "./assets/css/reset.css";
 @import "./assets/css/negus.css";
 @import "./assets/css/all.css";
 @import "./assets/css/style.css";
</style>