Rumah >hujung hadapan web >uni-app >Bagaimana untuk menyelesaikan masalah bahawa komponen yang dirujuk dalam uniapp tidak dapat mencari css
Bagaimana untuk menyelesaikan masalah bahawa komponen yang dirujuk dalam uniapp tidak dapat mencari css
- PHPzasal
- 2023-04-20 09:07:43868semak imbas
Dengan perkembangan teknologi bahagian hadapan yang semakin meningkat, rangka kerja pembangunan mudah alih uni-app berdasarkan Vue.js juga digemari oleh semakin ramai pembangun kerana ciri-ciri pembangunan yang sangat berkomponen dan merentas platform. Walau bagaimanapun, apabila saiz projek meningkat, kadangkala kami menghadapi beberapa masalah semasa pembangunan menggunakan aplikasi uni. Terutama apabila css yang berkaitan tidak dapat ditemui semasa merujuk komponen, saya percaya ramai orang telah menghadapi masalah ini. Artikel ini akan memperkenalkan secara terperinci penyelesaian kepada masalah yang rujukan komponen dalam uni-app tidak dapat mencari css.
1. Penerangan Masalah
Dalam uni-app, kami sering menggunakan perpustakaan komponen yang dibangunkan oleh orang lain semasa membangun. Walau bagaimanapun, semasa penggunaan, kami akan mendapati bahawa apabila merujuk komponen dalam perpustakaan komponen lain, beberapa gaya CSS tidak berjaya dirujuk, menyebabkan masalah dengan paparan komponen dan menjadikan keseluruhan projek kelihatan sangat tidak selaras, seperti yang ditunjukkan dalam rajah di bawah.
2. Analisis Masalah1 SebabBiasanya, gaya komponen ditakrifkan dalam teg gaya dalam komponen, dan kod JavaScript komponen ditakrifkan. semasa runtime akan dimasukkan secara dinamik ke dalam halaman. Walau bagaimanapun, gaya dalam komponen pihak ketiga yang dipasang melalui npm tidak boleh dimuatkan secara dinamik ke dalam halaman, menyebabkan gaya tidak berfungsi. 2. PenyelesaianMemandangkan punca masalah ialah gaya komponen tidak boleh dimuatkan secara dinamik ke dalam halaman, maka kita perlu mencari cara untuk memuatkan gaya pihak ketiga komponen ke dalam projek. Kami boleh menyelesaikannya dalam dua cara berikut: ① Salin komponen dan gaya komponen pihak ketiga terus daripada kod sumber ke projek, dan kemudian rujuknya. Walaupun kaedah ini boleh dilaksanakan, ia akan meningkatkan kerumitan projek dan kesukaran penyelenggaraan dan kemas kini. ② Gunakan fungsi sambungan gaya yang disediakan oleh apl uni untuk memuatkan gaya komponen pihak ketiga ke dalam projek melalui pemalam. 3. Pelaksanaan PenyelesaianDi sini, mengambil gaya UI Mint sebagai contoh, kami akan memperkenalkan cara menggunakan fungsi sambungan gaya yang disediakan oleh uni-app untuk memuatkan gaya ketiga- komponen parti ke dalam projek:
- Pasang pemalam gaya
npm install uniapp-style-loader --save-dev
- Configuration.vueconfig.js
fail, tambah kod berikut: vueconfig.js
configureWebpack: {
module: {
rules: [
{
test: /\.(vue|(j|t)sx?)$/,
exclude: /node_modules/,
use: [
{
loader: 'uniapp-style-loader',
options: {
// 可选参数，最大改变css、less、scss数量(默认3000)
maxImport: 3000,
},
}
]
}
]
}
},
- Tambah gaya yang perlu diperkenalkan
. Kemudian rujuknya dalam fail assets/style/mint-ui.scss: main.js
// 引入样式 import '@/assets/style/mint-ui.scss';Pada ketika ini, kami telah berjaya memuatkan fail gaya UI Mint ke dalam projek kami. Selepas menyusun semula projek, didapati kesan selepas memperkenalkan komponen telah dibaiki dengan baik, seperti yang ditunjukkan dalam rajah di bawah.
4. Ringkasan
Artikel ini memperincikan penyelesaian kepada masalah yang css tidak dapat ditemui semasa merujuk komponen dalam apl uni. Kami boleh menggunakan fungsi sambungan gaya yang disediakan oleh uni-app untuk memuatkan gaya komponen pihak ketiga ke dalam projek melalui pemalam. Ini bukan sahaja akan menyelesaikan masalah kehilangan gaya dalam komponen, tetapi juga meningkatkan kecekapan pembangunan projek.
Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa komponen yang dirujuk dalam uniapp tidak dapat mencari css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!