[英]@Import another css file didn't work when i'm working on Laravel 9 Inertia React stack
My goal is to import additional input.css file that has styling for input form for my react components file to the default app.css.我的目标是将额外的 input.css 文件导入到默认的 app.css 中,该文件具有我的反应组件文件的输入表单的样式。 For some reason, it didnt detect the focused attribute that is applied on the input.css styling, but whenever I put the styling inside @layer components it works.出于某种原因,它没有检测到应用于 input.css 样式的焦点属性,但是每当我将样式放在 @layer 组件中时,它就可以工作。
resources/css/app.css资源/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资源/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资源/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>
);
}
There's actually a warning from the vite.js enter image description here实际上有来自 vite.js 的警告enter image description here
But when I tried to move the @import on top before @tailwinds, it give another error on the webpage like this: enter image description here但是当我尝试将@import 移到@tailwinds 之前的顶部时,它会在网页上出现另一个错误,如下所示:在此处输入图像描述
And it works for example when I write it like this:例如,当我这样写时,它就可以工作:
resources/css/app.css资源/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;
}
}
help are appreciated, thanks.感谢您的帮助,谢谢。
I just found a work around on this, so instead of adding the import on the app.css file, you actually import the other css in the resources/js/app.jsx instead.我刚刚找到了解决此问题的方法,因此您实际上不是在 app.css 文件中添加导入,而是在resources/js/app.jsx中导入其他 css。 Such as:如:
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" });
I dont know if this is actually the way, or best practices or such.我不知道这是否是真正的方式,或最佳实践等。 But it works for now.但它现在有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.