前言

專業(yè)從事網(wǎng)站制作、網(wǎng)站設計,高端網(wǎng)站制作設計,微信小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術團隊竭力真誠服務，采用H5技術+CSS3前端渲染技術，響應式網(wǎng)站設計，讓網(wǎng)站在手機、平板、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中引入：

 
 
 
 
 
Hello World
 

效果為：

二、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)容對大家學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。