Webpack中css-loader和less-loader的使用教程
前言
在Webpack中，通過(guò)css-loader，可以實(shí)現(xiàn)在js文件中通過(guò)require的方式，來(lái)引入css。下面來(lái)看看詳細(xì)的介紹吧。
一、css-loader
我們需要在js文件里，通過(guò)require的方式來(lái)引入css，我們來(lái)看具體的方法，首先需要安裝css-loader，
style-loader(安裝style-loader的目的是為了在html中以style的方式嵌入css)。
npm install css-loader,style-loader --save-dev
然后在main.js中：
require('./app.css');
在app.css中：
#test{
background:red;
width:100px;
height:100px;
color:blue;
}
在webpack.config.js增加：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
};
在html中引入：
<html> <head> <script type="text/javascript" src="bundle.js"></script> </head> <body> <div id="test">Hello World</div> </body> </html>
效果為：
二、less-loader
同樣的，如果我們需要在js中，require，.less文件，那么我們需要增加包less-loader和less包
npm install less,less-loader --save-dev
在webpack.config.js修改：
module: {
loaders: [
{test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
]
}
在module的loaders中，增加了！less-loader。
如此便可以在js中，require .less文件。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章介紹了js使彈層下面body禁止?jié)L動(dòng)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并傳值
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并傳值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
js實(shí)現(xiàn)仿愛(ài)微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)仿愛(ài)微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼,通過(guò)javascript自定義函數(shù)結(jié)合鼠標(biāo)點(diǎn)擊事件實(shí)現(xiàn)tab切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
MATLAB中ismissing函數(shù)用法小結(jié)
這篇文章主要介紹了MATLAB中ismissing函數(shù)用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
第一步點(diǎn)擊需要拖動(dòng)的元素,在點(diǎn)擊下的元素被選中，進(jìn)行move移動(dòng),當(dāng)鼠標(biāo)彈起的時(shí)候，停止動(dòng)作.點(diǎn)擊元素oDIV的時(shí)候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域2013-03-03
js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼
這篇文章主要介紹了js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript獲得CheckBoxList選中的數(shù)量
javascript獲得CheckBoxList選中的數(shù)量(jQuery與Javascript對(duì)照學(xué)習(xí)/前臺(tái)與后臺(tái))2009-10-10
關(guān)于javascript中json 對(duì)象數(shù)組之間相互轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了關(guān)于javascript中json 對(duì)象數(shù)組之間相互轉(zhuǎn)化問(wèn)題,在實(shí)際應(yīng)用中，JSON對(duì)象和數(shù)組的結(jié)構(gòu)可能更加復(fù)雜，需要根據(jù)具體情況進(jìn)行相應(yīng)的處理和轉(zhuǎn)換，需要的朋友可以參考下2023-07-07
JavaScript實(shí)現(xiàn)扯網(wǎng)動(dòng)畫(huà)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語(yǔ)言實(shí)現(xiàn)扯網(wǎng)動(dòng)畫(huà)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定的幫助，需要的可以參考一下2022-06-06
javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法
javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法，對(duì)于cookies操作不是很熟悉的朋友可以參考下。2010-06-06