最近我們開發(fā)的百度小程序調(diào)用css失敗了，經(jīng)過了一番的排查和調(diào)試，我們最終發(fā)現(xiàn)了問題所在，現(xiàn)在就來給大家分享一下我們的經(jīng)驗。

//wxss樣式文件
.test {
color: red;
}

我們將上述樣式文件放在了工程目錄下的 `pages/index/index.wxss` 文件中。在頁面中使用如下代碼：

我是紅色字體

但是在小程序頁面中并沒有出現(xiàn)我們預(yù)期的紅色字體，而是默認的黑色字體。

經(jīng)過一番排查，我們重新打開微信開發(fā)者工具，查看控制臺的信息。我們發(fā)現(xiàn)了一些異常輸出：

VM70:1   Refused to apply style from 'xxx/pages/index/index.wxss' 
because its MIME type ('text/html') is not a supported stylesheet MIME type, 
and strict MIME checking is enabled.

異常信息中提示了文件的 MIME 類型異常，這也是導(dǎo)致 CSS 樣式文件不能正確引入的原因。我們查看了一下服務(wù)器的文件類型，發(fā)現(xiàn)我們的服務(wù)器返回的文件類型是 `text/html`，而不是正確的 `text/css`。

我們在服務(wù)器上更新了返回的 MIME 類型為 `text/css`，再次運行小程序，CSS 樣式文件就被正確地加載取而使用了。

總結(jié)：當(dāng)百度小程序調(diào)用 CSS 失敗時，我們應(yīng)該先在微信開發(fā)者工具中查看控制臺的錯誤信息；如果是 MIME 類型異常導(dǎo)致樣式文件不能正確引入，需要在服務(wù)器上更新文件類型。