隨著前端技術的日漸發展，基於Vue.js的行動端開發框架uni-app也因其高度組件化和跨平台開發的特性被越來越多的開發者所青睞。然而，隨著專案規模的增大，有時我們在使用uni-app開發的過程中也會遇到一些問題。尤其是在引用組件過程中找不到相關的css，這個問題相信很多人都遇過。本文將詳細介紹uni-app中元件引用找不到css的解決方案。
一、問題描述
在uni-app中，我們在開發時常常會使用到別人開發的元件庫。但在使用過程中，我們會發現在引用其他元件庫中的元件時，有些css樣式並沒有被成功引用，導致元件的顯示效果出現問題，使得整個專案看起來非常不協調，如下圖所示。
二、問題分析
1.原因
通常情況下，元件的樣式都會在元件內的style標籤中定義，而元件的JavaScript程式碼在執行時會被動態地插入到頁面中。但是，透過npm安裝的第三方元件中的樣式卻無法被動態載入到頁面中，導致樣式無法運作。
2.解決方案
既然問題的根源是元件的樣式無法被動態載入到頁面中，那麼我們就需要想辦法把第三方元件的樣式載入到專案中去，我們可以使用以下兩種方式來解決：
① 將第三方元件的元件和樣式從原始碼直接複製到專案中，然後進行引用。此方法雖可行，但是會增加專案的複雜度，以及維護和更新的難度。
② 使用uni-app提供的樣式擴充功能，將第三方元件的樣式透過外掛程式的方式載入到專案中。
三、解決方案實作
這裡以Mint UI的樣式為例，介紹如何使用uni-app提供的樣式擴充功能將第三方元件的樣式載入到專案中去：
我們需要先安裝uni-app提供的樣式擴充外掛程式。在uni-app專案中輸入以下指令安裝：
npm install uniapp-style-loader --save-dev
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,
},
}
]
}
]
}
},assets/style/mint -ui.scss檔案中。然後在main.js檔案中進行引用：
// 引入样式 import '@/assets/style/mint-ui.scss';
以上是uniapp中引用元件找不到css怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
