Laravel 9 with vite not recognizing @import

I'm trying to organize my tailwind css in layers using @import. The @import statements are not getting processed and appearing in the compiled css file after running "npm run build". What am I doing wrong?

resources/css/components/navbar.css

.navbar-outer {
    @apply sticky w-[100%] h-[100px] bg-[#222] flex items-center top-[-40px];
    /*position: sticky;*/
    /*width: 100%;*/
    /*height: 100px;*/
    /*background: #222;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*top: -40px;*/
}

.navbar-outer .navbar-inner {
    @apply sticky top-0 w-[100%] h-[60px] flex justify-between items-center px-5;
    /*position: sticky;*/
    /*top: 0;*/
    /*width: 100%;*/
    /*height: 60px;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    /*padding: 0 20px;*/
}

.navbar-outer .navbar-inner .logo {
    color: #f5f5f5;
    font-weight: 600;
    cursor: pointer;
}

.navbar-outer .navbar-inner .links a {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    text-decoration: none;
    color: #eee;
    border: 1px solid transparent;
    transition: all 200ms ease-in-out;
}

.navbar-outer .navbar-inner .links a:hover {
    border: 1px solid #888;
}

resources/css/app.css

@charset "UTF-8";

@tailwind base;
@tailwind components;

@layer base {
    @import "base/variables";
    @import "base/elements";
}

/**
  Components
  These styles can be overridden by Utility classes.
  These styles will only be included in the compiled CSS if they are actually used in the files specified in the
  `content` list in tailwind.config.js.
  */
@layer components {
    /*@import "components/button";*/
    /*@import "components/dropdown";*/
    /*@import "components/form";*/
    @import "components/navbar";

    /**
       Vendor and other special-purposed CSS
       These styles can be overridden by Utility classes.
       These styles are outside of any @layer so they will always be included in the compiled CSS.
      */
    /*@import "vendor/action_text";*/
    /*@import "vendor/emoji_picker";*/
    /*@import "vendor/tribute";*/

    /* Other rare cases that you want to preserve the CSS in the complied file.*/
    .some-special-class {
        @apply bg-blue-200 font-normal;
    }

}

@tailwind utilities;

@layer utilities {
    /*@import "utilities/background";*/
    /*@import "utilities/link";*/
}

.content {
    width: 100vw;
    max-width: 1460px;
    margin: auto;
}

.content  h1 {
    font-size: 40px;
    color: #222;
    margin-bottom: 20px;
}

.content  p {
    color: #555;
    margin: 10px 0;
}

resources/views/layouts/app.blade.php

<body class="font-sans antialiased">

    <div class="navbar-outer">
        <div class="navbar-inner">
            <div class="logo">LOGO</div>
            <div class="links">
                <a href="#">Home</a>
                <a href="#">Dashboard</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>

    <main class="content">
        {{ $slot }}
    </main>

</body>

AshboDev

3 years ago

Best Answer

Level 7

I had the same issue with Vite, it caused me more problems than it solved so I moved back to Mix. The docs has a very simple how-to on this, and it works a charm: https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix

FWIW, I don't think Vite has an "import" function like Mix does, but then again I had a bad first experience with it, and not touched it since so it may have improved since then.

I've worked on a few new projects since Vite was the standard, and all of them have been reverted to Mix, as it works for me and my team, without any issues, however if you want to stick to Vite, then this answer/reply is irrelevant, as I've only moved back to Mix from it!

tl;dr - Vite has always caused me problems, even on fresh installs, always reverted back to mix in the link above, and low and behold, everything worked flawlessly first time - unlike Vite...

2 likes

jmacdiarmid

3 years ago

Level 2

@AshboDev Thank you for your comment in sharing your experience. I have felt the same way and have switched to mix on several projects as well. However, since reading some reviews on vite, I have also been trying to come up to speed and learn the new way of doing things. It might have been a good idea to offer Vite as a choice instead of forcing the masses to switch to something new, at least until the "bugs/features" are worked out and understood. Or at least have a 1 : 1 migration to something new but faster in the compilation of assets.

1 like

Please or to participate in this conversation.