有許多第三方庫可以幫助我們建構豐富的SharePoint Framework用戶端web部件。并且這些JavaScript腳本常常包含一些資産如樣式表。本文将介紹如何将第三方的CSS打包到你的Solution中。本示例将使用jQuery和jQuery UI來顯示一個折疊樣式。
Note: 在此之前你需要先配置一下SPFx用戶端web部件的開發環境。
準備項目
建立一個新的項目
首先打開指令行，在你喜歡的目錄建立一個項目目錄，如md js-thirdpartycss，然後通過cd指令進入到該目錄。執行指令yo @microsoft/sharepoint來使用Yeoman generator來搭建一個新的SPFx項目。之前的文章裡也有相關的具體描述，這裡不再贅述了。
建立完項目之後，執行指令npm shrinkwrap來鎖定項目目前依賴庫的版本。然後用VS Code打開你的項目。
添加測試内容
打開檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，将render方法修改為如下代碼：
這時先不要編譯項目，因為編譯的時候你會得到一個錯誤提示$未定義，這是因為項目沒有首先加載引用的jQuery。而将第三方庫打到包中是最簡單的方式，在包部署的時候會引用包中存在的第三方庫。
執行下面的指令安裝jQuery和jQuery UI：
npm install jquery jquery-ui --save
由于我們使用的是TypeScript進行開發，我們還需要TypeScript的jQuery類型，使用下面的指令執行安裝：
npm install @types/jquery --save
在web部件中引用樣式庫
安裝了庫之後，下一步就是在項目中引用它們。打開檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在頂部最後一個import引用聲明下面添加jQuery和jQuery UI的引用。
import * as $ from 'jquery';
require('../../../node_modules/jquery-ui/ui/widgets/accordion');
由于我們已經安裝了TypeScript的jQuery類型包，我們可以使用import進行引入。jQuery UI這個包比較特殊，它跟其他的子產品結構不太一樣，并沒有一個主入口來調用所有的元件，所有我們需要進行明确的直接引用。
接下來使用gulp serve指令編譯項目，然後就可以通過工作台添加web部件看效果了。
現在的這個是缺少樣式的，也就是說接下來我們要将樣式添加到web部件中。
在web部件中引用第三方CSS樣式
SPFx提供了從Webpack加載CSS的标準支援。打開檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在上面添加的代碼之後繼續添加下面的require聲明。
require('../../../node_modules/jquery-ui/themes/base/core.css');
require('../../../node_modules/jquery-ui/themes/base/accordion.css');
require('../../../node_modules/jquery-ui/themes/base/theme.css');
非常簡單，跟在頁面上引用基本類似，隻需要指明CSS的路徑就可以了。在編譯項目時，Webpack會将這些引用的檔案放到web部件包中。再次執行gulp serve指令後檢視效果。
分析生成的web部件包的内容
使用第三方庫最簡單的方式就是将它們包含到web部件包中。Webpack會自動解析所有的依賴項以確定所有的腳本以正确的順序加載。這種方式的不足是所有的引用資源都會在每個web部件單獨加載。如果我們的項目中有多個web部件都使用jQuery UI，每個web部件都會加載自己的jQuery UI副本，是以會減慢頁面的加載速度。
來看看打到web部件包中對尺寸的影響，在打包完成之後在浏覽器中打開檔案./temp/stats/js-thirdpartycss.stats.html。在圖表上移動滑鼠你就會看到相應的資訊，例如下圖中的被web部件引用的jQuery UI CSS檔案占據了6%的總大小。
圖表下方的免責聲明中提到，尺寸表示的是調試版本的包的大小。釋出版本包會小很多。從圖表中也能清晰地看到web部件包的各部分構成。