Webpack中的css-loader和less-loader

来源：互联网发布：淘宝客服模板代码编辑：程序博客网时间：2024/04/30 01:32

简介：在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 World</div>  </body></html>

效果为：
这里写图片描述

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

0 0

Webpack中 的css-loader和less-loader

Webpack中的css-loader和less-loader