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

發(fā)布時間：2020-10-01 11:02:09 來源：腳本之家閱讀：187 作者：小小小小小亮欄目：web開發(fā)

前言

在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文件。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽