چگونه میتوان فایل های جدید css و javascript را در داخل vue component لود کرد؟
میخواهم در هر component یک فایل جدید از css یا javascript را لود کنم اما نمی دانم چگونه این کار انجام بدهم.
سلام فایل جاوااسکریپتی رو اگه بخوای داخل هر کامپوننت فراخانی کنی میتونی پکیج مورد نظرت با استفاده از NPM نصب کنی و داخل کامپوننت مورد نظرت import کنی .
import {between, required} from 'vuelidate/lib/validators'
هر کامپوننت هم چون قسمتی از وبسایته مطمعنن استایل زیادی درون خودش نداره شما میتونی داخل کامپوننت مورد نظر داخل تگ استایل از css های خودتون استفاده کنید.
یا اینکه به صورت زیر استفاده کنید :
<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>
خیلی ممنون @davoodkhany عزیز، اما فایل های css بصورت custom نوشته شده و در داخل فولدر assets قرار دارد.
خسته نباشید داخل همون کامپوننت تگ style رو باز کنید و بعد اون فایل custom نوشته شده در داخل فولدر assets رو import کن×××
<style>
@import '/assets/css/mycss_lib.css';
</style>
@davoodkhany عزیز روشی را کی پشنهاد کردید من استفاده کردم اما یک error دریافت کردم، البته من از ویو را در داخل لاراول استفاده میکنم و فایلم های استایل بنده داخل فولدر public قرار دارد.
app.js:7514 Uncaught Error: Cannot find module '-!../../../../node_modules/css-loader/index.js??ref--6-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./public/css/aziz.css'
at webpackMissingModule (app.js:7514)
at Object../node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:7514)
at webpack_require__ (app.js:20)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:38390)
at webpack_require (app.js:20)
at Module../resources/js/components/membership/MyPassport.vue?vue&type=style&index=0&lang=css& (app.js:56986)
at webpack_require (app.js:20)
at Module../resources/js/components/membership/MyPassport.vue (app.js:56935)
at webpack_require__ (app.js:20)
at Module../resources/js/routes.js (app.js:57021)
من همینو تو لاراول 5.8 دارم استفاده می کنم بعضی از پکیج ها تو لاراول 6 از فایل پکیج جیسون پاک شده یعنی باید خودتون نصب کنید و تست کنید ومشکل رو رفع کنید .
اینو کم دارید :
https://vue-loader.vuejs.org/guide/#vue-cli
بعدش داخل کامپوننت برای style مشخص کنید که
lang="css"
یا مثال زیر :
<style lang="css">
@import '/css/style.css';
thead > tr {
background-color:black!important;
color:white;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #F7DFE1;
}
.flex-container {
display: flex;
justify-content :space-between;
}
.tr-expand td .content-tr-expand, .tr-expand td .tr-expand--close {
display: block !important;
}
.td-check{
color:red !important;
}
@media (max-width:991px){
.card_single{
flex-wrap: wrap;
}
}
</style>
انشالله که درست بشه
سلام خسته نباشی اگه کارت راه افتاده اون بخشی که جواب درست بوده رو بهترین پاسخ بزار تا دیگران هم استفاده کنن مرسی. :)))
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟