مشکل در میکس کردن فایل های scss در دایرکتوری public
سلام دوستان. من برای بخش فرانت اند پروژه از یک قالب آماده استفاده کردم و فایل های css قالب رو که شامل : bootstrap.min.css و bootstrap-rtl.min.css و style.css و demo-4.css میشه. که همه این این 4 تا فایل رو تو دایرکتوری public و در فایل app.css توسط لاراول میکس قرار دادم. الان یه مشکلی هست که من میخام یکسری از بخش های قالب رو کمی تغییر بدم مثلا وقتی میخام یک div با کلاس card ایجاد کنم اون کلاس card درست اجرا نمیشه و وقتی inspect میگیرم میبینم برای این div سه تا کلاس card (دقیقا هم نام کلاس card) اعمال شده. تو آموزش لاراول گفته شد که برای افزایش سرعت سایت و بهینه تر شدن همه فایل های css و js رو تو یک فایل در دایرکتوری public میکس می کنیم علاوه بر این تو دوره پروژه محور لاراول جناب موسوی تمام فایل های css و js قالب پنل مدریت رو تو یک فایل میکس کردن و به مشکل برنخوردن. درصورتی که من به مشکل خوردم. راه حل درست این مشکل چیه دوستان؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
موضوعی که می‌فرمایید ارتباطی به میکس کردن فایل ها در قالب یک فایل نداره و اگر هر کدوم از فایل ها رو بصورت جداگانه هم لود کنید طبیعتا باز هم همین داستان وجود خواهد داشت. چون مسئله بر میگرده به Overwrite شدن قوانین CSS و نحوه رفتار مرورگرها.
منظور اینکه روش و منطق کارتون در نحوه میکس کردن فایل ها در قالب یک فایل صحیح هست. ولی این قضیه جالب نیست که برای یک کلاس یا آيدی در چندین فایل مختلف استایل های مختلف تعریف شده باشه و تا حد امکان باید از این قضیه خودداری کنید. مثلا نمیدونم از چه مدل بوت استرپ راست چینی استفاده می‌کنید. ولی خیلی هاشون به نحوی هستند که بصورت مستقل نوشته شدند و نباید در کنار خود بوت استرپ اصلی لود شوند. بلکه کلا باید جایگزین شود.
در خصوص ایجاد کلاس های جدید توسط خودتون هم اگر قصد ایجاد استایل خاصی رو دارید نباید از کلاس هایی که قبلا توسط بوت استرپ یا قابلتون تعریف شدند استفاده کنید. بلکه باید از یک نام دیگه برای کلاستون استفاده کنید. وقتی شما از نام های مشترک با بوت استرپ و قالبتون استفاده می‌کنید طبیعتا مروگر تمامی استایل های از پیش تعریف شده رو هم لود می‌کنه. اگر استایل جدیدتری هم شمابهش اضافه کنید فقط همون موارد جدیدتر رو روی قبلی ها Overwrite می‌کنه.
به همین خاطر اگر نمی‌خواهید که چنین اتفاقی بیفته باید از نام های دیگری برای calss هاتون استفاده کنید.
@mhyeganeh
ممنون بابت راهنماییتون. در کل چه راهی پیشنهاد میدین؟ فایل bootstrap.min.css رو حذف کنم و همه استایل پروژه از bootstrap-rtl.min.css و style.css لود کنم؟ چون نمیشه برای استفاده از تمامی کلاس های بوت استرپ اون هارو دوباره نوشت و نام کلاس ها رو عوض کنم. چون فلسفه استفاده از فریمورک بوت استرپ که راحتی توسعه هست از بین میره و عملا نمیشه از بوت استرپ استفاده کرد.
من نگفتم نام کلاس های بوت استرپ رو دوباره بنویسید و اصلا نگفتم که اسم کلاس های بوت استرپ رو عوض کنید. اینکار که خیلی غلط و وحشتناکه...!
پیشنهادم این بود که اگر قصد ایجاد استایل کاستوم برای خودتون دارید باید از عنوان کلاس متفاوتی نسبت به مواردی که قبلا توسط بوت استرپ مورد استفاده قرار گرفتند استفاده کنید. کلاس card مثلا قبلا توسط بوت استرپ مورد استفاده قرار گرفته و اگر نمی خواهید که استایل های شما با استایل های بوت استرپ همپوشانی داشته باشه، لازم هست که برای کلاس خودتون (نه بوت استرپ!) یک اسم دیگه انتخاب کنید. مثلا custom-card.
@mhyeganeh .
اتفاقا منظوررشمارو فهمیدم ولی من میخام از کلاس های بوت استرپ استفاده کنم. ولی وقتی یه کلاس مثلا card رو فراخوانی می کنم از سه جا این کلاس card فراخوانی میشه و تهش استایل card به درستی اعمال نمیشه. نمدونم چکار کنم. میترسم هر کدوم از فایل های bootstrap.min.css یا bootstrap-rtl.min.css یا style.css رو حذف کنم(برای جلوگیری از تداخل کلاس ها) یه بخش از استایل پروژه به مشکل بخوره
احتراما به نظرم کاری که می‌خواهید انجام بدید اصولی نیست و ممکنه بعدا دچار مشکل بشید.
ولی باز هم اگر همچنان اصرار دارید که از همون کلاس‌های بوت استرپ استفاده کنید، می‌تونید با استفاده از روش‌های نه چندان اصولی (!) مطمئن بشید که در نهایت استایل های دلخواه شما بروی استایل های قبلی OverWrite شده باشند. مثلا از دستور important! در پایان استایل های خودتون استفاده کنید تا در درجه اول اولویت قرار بگیره.
.card {
background: red !important;
padding: 50px !important;
//...
}@mhyeganeh
ممنون بابت راهنمایتون. درکل برای توسعه فرانت اند در لاراول باید تمام فایل های css رو در دایرکتوری public کامپایل کرد؟
بله. به طور کلی ساختار فریم ورک لاراول بگونه ای هست که کلیه asset هایی که قصد لود کردنشون رو داشته باشید مثل فایل css و js و تصاویر و فونت ها و ... حتما باید داخل این فولدر قرار گرفته باشند.