Webpack中css-loader和less-loader的使用教程
更新時間：2017年04月27日 11:25:43 作者：小小小小小亮
這篇文章主要介紹了關(guān)于Webpack中css-loader和less-loader的使用教程，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
前言
在Webpack中，通過css-loader，可以實現(xiàn)在js文件中通過require的方式，來引入css。下面來看看詳細的介紹吧。
一、css-loader
我們需要在js文件里，通過require的方式來引入css，我們來看具體的方法，首先需要安裝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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章介紹了js使彈層下面body禁止?jié)L動的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)頁面跳轉(zhuǎn)并傳值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
js實現(xiàn)仿愛微網(wǎng)兩級導航菜單效果代碼
這篇文章主要介紹了js實現(xiàn)仿愛微網(wǎng)兩級導航菜單效果代碼,通過javascript自定義函數(shù)結(jié)合鼠標點擊事件實現(xiàn)tab切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
MATLAB中ismissing函數(shù)用法小結(jié)
這篇文章主要介紹了MATLAB中ismissing函數(shù)用法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
第一步點擊需要拖動的元素,在點擊下的元素被選中，進行move移動,當鼠標彈起的時候，停止動作.點擊元素oDIV的時候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域2013-03-03
這篇文章主要介紹了js 計算圖片內(nèi)點個數(shù)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
javascript獲得CheckBoxList選中的數(shù)量
javascript獲得CheckBoxList選中的數(shù)量(jQuery與Javascript對照學習/前臺與后臺)2009-10-10
關(guān)于javascript中json 對象數(shù)組之間相互轉(zhuǎn)化問題
這篇文章主要介紹了關(guān)于javascript中json 對象數(shù)組之間相互轉(zhuǎn)化問題,在實際應用中，JSON對象和數(shù)組的結(jié)構(gòu)可能更加復雜，需要根據(jù)具體情況進行相應的處理和轉(zhuǎn)換，需要的朋友可以參考下2023-07-07
JavaScript實現(xiàn)扯網(wǎng)動畫效果的示例代碼
這篇文章主要為大家詳細介紹了如何利用JavaScript語言實現(xiàn)扯網(wǎng)動畫效果，文中的示例代碼講解詳細，對我們學習JS有一定的幫助，需要的可以參考一下2022-06-06
javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法
javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法，對于cookies操作不是很熟悉的朋友可以參考下。2010-06-06