vite与laravel编译开发css不正确

cbjzeqam  于 2023-03-24  发布在  其他
关注(0)|答案(1)|浏览(152)

I have built a layout using the tailwindcss node package on my local PC (no Laravel or Vite, just running npx tailwindcss -i etc/file.css -o public/file.css and the compiler built the CSs correctly. I then created a new Laravel application, configured tailwind.config.js , vite.config.js and postcss.config.js files respectively. However, when I run npm run dev and take a look in the browser the page does not look correct. The black button on the left hand side of the screen is supposed to trigger a drop down menu. This works on the standalone tailwind project, but when I merge it with my Laravel project, it doesn't work. In addition, the page doesn't look right
This is what the page is supposed to look like:

And this is how it looks in Laravel:

As you can see the CSS isn't compiling correctly.
Here is my vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
            host: 'begging.test',
            https: false,
            hmr: {
                host: 'begging.test',
            },
    },
    plugins: [
        laravel([
            'resources/css/app.css'
        ]),
    ],
});

Here is tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: {
        "./resources/**/*.blade.php",
        "./resources/**/*.css",

    },

    theme: {
        extend: {
            colors: {
                primary: '#3b3737',
                secondary: {
                    100: '#E2E2D5',
                    200: '#888883'
                }
            },
            fontFamily: {
                body: ['Inter']
            }
        }
    },
    plugins: {
        'postcss-import': {},

    },

}

Here is the postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

This is the app.css file:

@import "./custom.css";
@import "./normalize.css";
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn{
    @apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer;
}

This is the custom.css file:

@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@600&display=swap');
header {
    background: linear-gradient(to right, #dce4ec, #77a7af);
    height: 100px;
}
nav {
    display: flex;
    justify-content: center;
}

.content a {
    color: blue;
    text-decoration: none;
}

.content a:hover {
    color: red;
    text-decoration: underline;

}

.nav-links {
    display: inline-block;
    list-style: none;

}

.nav-item {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;

}

.nav-link {
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .5);
}

.logo {
    color: #575353;
    font-family: 'Edu NSW ACT Foundation', cursive;
    margin: 0 0;

}

.container {
    max-width: 1200px;
    margin: 0 0;
}

.welcome {
    position: absolute;
    left: 700px;
}

.content {
    display: none;
}

and finally this is the app.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Send Tom to University</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    @vite('resources/css/app.css')

    <script type="text/javascript">
        $(document).ready(function() {
            $(".welcome").animate({left: "375px"}, 1000);
            $(".content").fadeIn(2000);
        });
    </script>
</head>
<body>
<header>
    <div class="container">
        <span class="logo text-2xl">Send Tom to Athabasca</span>
    </div>
    <nav>
        <ul class="nav-links">
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">About me</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Projects</a></li>
            <li class="nav-item"><a class="nav-link hover:underline" href="#">Donate</a></li>

        </ul>
    </nav>
    </div>
</header>

<main>
    <div class="grid grid-cols-5">
        <div class="col-span-1 border-solid border-black border-r-2">



            <div class="ml-8 items-center justify-center my-4">
                <h2 class="text-2xl">Ways I make money</h2>

                <div class="mt-4 ml-8">
                    <div class="relative w-[122px] overflow-hidden">

                        <div class="btn bg-primary text-white border-primary border-2 hover:bg-white hover:text-primary">Cryptocurrency
                        </div>
                        <input type="checkbox" class="peer absolute top-0 inset-x-0 w-full h-10 opacity-0 z-10 cursor-pointer" />


                        <div class="overflow-hidden transition-all duration-500 ml-4 max-h-0 peer-checked:max-h-40">
                            <div class="bg-gray-200 rounded">
                                <span class="flex items-center justify-center">testing</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-4">
            <h1 class="text-4xl welcome">
                @if(isset($page_title))
                    {{$page_title}}
                @else
                    Support Tom Morison
                @endif

                    </h1>
            <div class="m-20 bg-[#eeeeee] shadow-xl font-body hover:shadow-inner font-body content">
                @yield('content')
            </div>

        </div>
    </div>
    </div>
</main>

</body>
</html>

I find it odd that the layout works when I just use tailwind, however when I migrate to Laravel there are tons of mistakes. Thanks in advance.
EDIT:
I forgot to mention this is what I get when I run npm run dev . The Vite server runs for a few minutes before crashing.
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
VITE v4.2.0 ready in 3174 ms
➜ Local: http://begging.test:5173/ ➜ Network: http://10.0.2.15:5173/ ➜ Network: http://192.168.56.56:5173/ ➜ press h to show help
LARAVEL v10.4.1 plugin v0.7.4
➜ APP_URL: http://begging.test node:internal/errors:490 ErrorCaptureStackTrace(err); ^
Error: ENOSPC: System limit for number of file watchers reached, watch '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php' at FSWatcher. (node:internal/fs/watchers:247:19) at Object.watch (node:fs:2315:34) at createFsWatchInstance (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50313:17) at setFsWatchListener (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50360:15) at NodeFsHandler._watchWithNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50515:14) at NodeFsHandler._handleFile (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50579:23) at NodeFsHandler._addToNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50821:21) Emitted 'error' event on FSWatcher instance at: at FSWatcher._handleError (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:52013:10) at NodeFsHandler._addToNodeFs (file:///home/vagrant/code/begging/node_modules/vite/dist/node/chunks/dep-c167897e.js:50829:18) { errno: -28, syscall: 'watch', code: 'ENOSPC', path: '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php', filename: '/home/vagrant/code/begging/vendor/voku/portable-ascii/src/voku/helper/data/x0cd.php' }

laravel

1条答案

按热度按时间
r1zhe5dt

r1zhe5dt1#

我想通了
我的tailwind.config.js文件应该是这样的：

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [

        "./resources/**/*.blade.php",
        "./resources/**/*.css"

    ],

    theme: {
        extend: {
            colors: {
                primary: '#3b3737',
                secondary: {
                    100: '#E2E2D5',
                    200: '#888883'
                }
            },
            fontFamily: {
                body: ['Inter']
            }
        }
    },
    plugins: ["tailwindcss ,autoprefixer"]

}
赞(0）分享  回复(0）举报  2023-03-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com