Webpack中css-loader和less-loader的使用教程

前言

專業(yè)從事網站制作、網站設計,高端網站制作設計,微信小程序開發(fā),網站推廣的成都做網站的公司。優(yōu)秀技術團隊竭力真誠服務，采用H5技術+CSS3前端渲染技術，響應式網站設計，讓網站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組，與您實時在線互動，隨時提供解決方案，暢聊想法和感受。

在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>

效果為：

Webpack中css-loader和less-loader的使用教程

二、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文件。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

網站欄目：Webpack中css-loader和less-loader的使用教程
本文URL：http://www.aaarwkj.com/article16/gjipgg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、網站建設、網站營銷、企業(yè)網站制作、小程序開發(fā)、Google

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

Webpack中css-loader和less-loader的使用教程