@Import 另一個 css 文件在我處理 Laravel 9 Inertia React 堆棧時不起作用

Question

我的目標是將額外的 input.css 文件導入到默認的 app.css 中，該文件具有我的反應組件文件的輸入表單的樣式。 出於某種原因，它沒有檢測到應用於 input.css 樣式的焦點屬性，但是每當我將樣式放在 @layer 組件中時，它就可以工作。

資源/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "input.css";

.flex::before,
.flex::after {
    display: none !important;
}

@layer components {
    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"],
    [multiple],
    textarea,
    select {
        border-color: transparent;
    }

    [type="text"]:focus,
    [type="email"]:focus,
    [type="url"]:focus,
    [type="password"]:focus,
    [type="number"]:focus,
    [type="date"]:focus,
    [type="datetime-local"]:focus,
    [type="month"]:focus,
    [type="search"]:focus,
    [type="tel"]:focus,
    [type="time"]:focus,
    [type="week"]:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        border-color: transparent;
        --tw-ring-color: transparent;
    }
}

資源/css/input.css

.input-primary {
    @apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}

.input-error {
    @apply ring ring-red-600;
}

.input-primary-outline {
    @apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
    @apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
}

資源/js/Input.jsx

import React, { useEffect, useRef } from 'react';
import PropType from 'prop-types';

Input.propTypes = {
    type: PropType.oneOf(['text', 'email', 'password', 'number', 'file']),
    name: PropType.string,
    value: PropType.oneOfType([PropType.string, PropType.number]),
    defaultValue: PropType.oneOfType([PropType.string, PropType.number]),
    className: PropType.string,
    variant: PropType.oneOf(['primary', 'outline', 'primary-outline']),
    autoComplete: PropType.string,
    required: PropType.bool,
    isFocused: PropType.bool,
    handleChange: PropType.func,
    placeholder: PropType.string,
    isError: PropType.bool,
}

export default function Input({
    type = 'text',
    name,
    value,
    defaultValue,
    className,
    variant = "primary",
    autoComplete,
    required,
    isFocused,
    handleChange,
    placeholder,
    isError
}) {
    const input = useRef();

    useEffect(() => {
        if (isFocused) {
            input.current.focus();
        }
    }, []);

    return (
        <div className="flex flex-col items-start">
            <input
                type={type}
                name={name}
                value={value}
                defaultValue={defaultValue}
                className={
                    `rounded-2xl bg-form-bg py-[13px] px-7 w-full ${isError && "input-error"} input-${variant} ${className}`
                }
                ref={input}
                autoComplete={autoComplete}
                required={required}
                onChange={(e) => handleChange(e)}
                placeholder={placeholder}
            />
        </div>
    );
}

實際上有來自 vite.js 的警告enter image description here

但是當我嘗試將@import 移到@tailwinds 之前的頂部時，它會在網頁上出現另一個錯誤，如下所示：在此處輸入圖像描述

例如，當我這樣寫時，它就可以工作：

資源/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
/* @import "input.css"; */

.flex::before,
.flex::after {
    display: none !important;
}

.input-primary {
    @apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}

.input-error {
    @apply ring ring-red-600;
}

@layer components {
    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"],
    [multiple],
    textarea,
    select {
        border-color: transparent;
    }

    [type="text"]:focus,
    [type="email"]:focus,
    [type="url"]:focus,
    [type="password"]:focus,
    [type="number"]:focus,
    [type="date"]:focus,
    [type="datetime-local"]:focus,
    [type="month"]:focus,
    [type="search"]:focus,
    [type="tel"]:focus,
    [type="time"]:focus,
    [type="week"]:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        border-color: transparent;
        --tw-ring-color: transparent;
    }
    .input-primary-outline {
        @apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
        @apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
    }
}

感謝您的幫助，謝謝。

Answer 1

我剛剛找到了解決此問題的方法，因此您實際上不是在 app.css 文件中添加導入，而是在resources/js/app.jsx中導入其他 css。 如：

import "./bootstrap";
import "../css/app.css";
import "../css/button.css";
import "../css/input.css";
import "../css/sidebar.css";

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

我不知道這是否是真正的方式，或最佳實踐等。 但它現在有效。