Webpack中 的css-loader和less-loader

简介:在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css。

1.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 Worlddiv>
  body>
html>

效果为:
Webpack中 的css-loader和less-loader_第1张图片

2.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文件。

你可能感兴趣的:(Webpack)