搜尋
首頁web前端css教學require能引進CSS嗎

require能引進CSS嗎

Jan 28, 2021 am 10:55 AM
require

require能引入CSS,其引入css的方法:先下載require-css插件;然後修改require.config配置;接著載入ELEMENT;最後在頁面上呼叫require_css方法傳入css位址即可。

require能引進CSS嗎

本教學操作環境:windows7系統、HTML5&&CSS3版本,DELL G3電腦。

推薦:css影片教學

使用require模組化開發時,在require.config配置中,定義模組的引入路徑時,有些是需要依賴css的,這個時候需要透過require-css插件,在github上可以下載到地址:https://github.com/guybedford/require-css。

透過這個位址下載下來會有很多,如下圖,我們只要css.js/css.min.js檔案就好。

require能引進CSS嗎

2. 在require.config設定中加入如下圖的設定:

require能引進CSS嗎

##3. 完成上面兩部之後,就可以在require.config配置中shim增加依賴,在載入ELEMENT的時候需要事先載入index.css。寫法如下:

shim:{
    "ELEMENT": {
        "deps": ["vue", "css!assets/vue/element-ui/lib/theme-chalk/index.css"]
    }
},

4. 上面解決了,模組依賴css的問題,但是有時候還需要單獨引入某個css的時候,當然啦,可以直接拖到html頁面中載入。但是如果不想這樣做的話,這個時候就可以透過改寫require.config的寫法來實現,將require的配置寫成一個變量,然後在頁面中在初始化,如下圖:

require能引進CSS嗎##要實作上圖寫法,首先要準備一個base.js文件,這個文件只需要寫document.body.style.visibility = 'visible';這麼一句話就可以了(也可以寫其他的) ,然後在requireConfig配置的同一個js中增加一個方法,用來在base的依賴中增加css,寫法如下圖紅框。

接著在頁面上呼叫require_css方法傳入css位址,這樣css將會引入頁面中,寫法如下:

require能引進CSS嗎這樣就大功告成了。

以上是require能引進CSS嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
'訂閱播客”鏈接應在哪裡?'訂閱播客”鏈接應在哪裡?Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

瀏覽器引擎多樣性瀏覽器引擎多樣性Apr 16, 2025 pm 12:02 PM

當他們在2013年去Chrome時,我們失去了歌劇。與Edge今年早些時候也進行了同樣的交易。邁克·泰勒(Mike Taylor)稱這些變化為“減少

網絡共享的UX注意事項網絡共享的UX注意事項Apr 16, 2025 am 11:59 AM

從垃圾點擊誘餌網站到大多數出版物的最多,共享按鈕長期以來一直無處不在。然而,這些

每周平台新聞:Apple部署網絡組件,漸進的HTML渲染,自託管關鍵資源每周平台新聞:Apple部署網絡組件,漸進的HTML渲染,自託管關鍵資源Apr 16, 2025 am 11:55 AM

在本週的綜述中,Apple進入Web組件,Instagram如何插入腳本以及一些思考的食物,以進行自託管關鍵資源。

git Pathspecs以及如何使用它們git Pathspecs以及如何使用它們Apr 16, 2025 am 11:53 AM

當我查看GIT命令的文檔時,我注意到其中許多人都有選擇。我最初以為這只是一個

產品圖像的彩色拾取器產品圖像的彩色拾取器Apr 16, 2025 am 11:49 AM

聽起來有點像一個困難的問題,不是嗎?我們經常沒有成千上萬種顏色的產品鏡頭,以便我們可以隨身攜帶。我們也不是

黑暗模式與React和Themeprovider切換黑暗模式與React和Themeprovider切換Apr 16, 2025 am 11:46 AM

我喜歡網站具有“暗模式”選項時。黑暗模式使我更容易閱讀網頁,並幫助我的眼睛更放鬆。許多網站,包括

帶有HTML對話框元素的一些動手帶有HTML對話框元素的一些動手Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)