@Import另一个css文件在我使用Laravel 9惯性反应堆栈时没有工作

Question

我的目标是将具有输入表单样式的其他input.css文件导入到默认的app.css中。由于某些原因，它没有检测到应用于input.css样式的焦点属性，但是每当我将样式放在@layer组件中时，它就能工作。

resources/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;
    }
}

resources/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;
}

resources/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 在这里输入图像描述发出了警告

但是，当我试图在“顺风”之前将“导入”移到顶部时，它会在网页上出现另一个错误：在这里输入图像描述

例如，当我这样写它时，它是有效的：

resources/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

我刚刚在这方面找到了一项工作，因此，您不必在resources/js/app.jsx文件中添加导入，而是在app.css中导入其他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" });

我不知道这是不是真正的方式，或最佳做法或诸如此类。但现在起作用了。