[英]@Import another css file didn't work when i'm working on Laravel 9 Inertia React stack
我的目标是将额外的 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;
}
}
感谢您的帮助,谢谢。
我刚刚找到了解决此问题的方法,因此您实际上不是在 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" });
我不知道这是否是真正的方式,或最佳实践等。 但它现在有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.