Bagaimana untuk menyelesaikan masalah bahawa komponen yang dirujuk dalam uniapp tidak dapat mencari css-uni-app-php.cn

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 Masalah

1 Sebab

Biasanya, 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. Penyelesaian

Memandangkan 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 Penyelesaian

Di 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:

Kami perlu terlebih dahulu memasang pemalam sambungan gaya yang disediakan oleh uni-app. Masukkan arahan berikut dalam projek uni-app untuk dipasang:

npm install uniapp-style-loader --save-dev

Ditemui dalam akar projek direktori

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,
                          },
                        }
                        ]
                    }
             ]
         }
     },

Salin selepas log masuk

Selepas memasang pemalam sambungan gaya, kami perlu memperkenalkan pihak ketiga Gaya komponen ditulis ke dalam fail tertentu Contohnya, kami menulis gaya UI Mint yang perlu dimasukkan ke dalam fail

. Kemudian rujuknya dalam fail assets/style/mint-ui.scss: main.js

// 引入样式
import '@/assets/style/mint-ui.scss';

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Apakah maksud uniapp bukan asli? Artikel seterusnya：Berapa kali pakej uniapp boleh?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang