javascript – requirejs 引用 CSS 的方法

使用 require.js 可以載入 js 檔,但如果要載入 css 的話,就必須透過 require-css 才有辦法載入。

安裝方法

  • 下載後,將 require-css/css.min 放到你的專案路徑。
  • 接著設定 requirejs 如

     
  • 中間這段 map 就是當載入之前,務必要優先載入的外掛,例如我們這次的 require-css

    我們自訂一個叫做  ‘css’ 的辨識詞,之後只要在前綴的文字打上 『css!』,系統就會知道我們要載入 CSS 文件。
    ‘plugin/JS/require-css/css.min’ 是引用我檔案放置的位置。
  • 依賴的部分,我的 jqui 會依賴 ‘jq’ 與 ‘css!jqui-css’。

    ‘jq’ 會從上方 path 設定中得知,要先引用 plugin/JS/jquery-1.11.1.min.js
    ‘css!jqui-css’ 因為有 『css!』作為前綴,所以系統會被知道要使用的是 css 檔而不是 js 檔。後方的 ‘jqui-css’ 也是參考了 path 設定,要引用 plugin/JS/jquery-1.11.1.min.css 檔。
  • 所以當我們這麼使用

    因為依賴已經設定的關係,我們除了加載 plugin/JS/jquery-ui-1.11.2/jquery-ui.min.js 之外,在這之前還會分別加載 plugin/JS/jquery-1.11.1.min.js 與 plugin/JS/jquery-ui-1.11.2/jquery-ui.min.css

目前這樣看來很分散,程式碼並不是很漂亮,邏輯也跳躍,覺得不是個好方法,但是是目前解決的方式吧!相關資料可以參考

 

參考資料
require.js 相關的外掛

發表迴響