Webpack中的css-loader和less-loader

最新推荐文章于 2024-08-22 08:34:06 发布

小小小小小亮

最新推荐文章于 2024-08-22 08:34:06 发布

阅读量3.7w

点赞数 2

分类专栏： Webpack 文章标签： Webpack css-loader less-loade style-load

本文链接：https://blog.csdn.net/liwusen/article/details/53519342

版权

Webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

小小小小小亮

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Webpack中 的css-loader和less-loader

Webpack中的css-loader和less-loader