三、css-loader以及style-loader的使用_npm style-loader-优快云博客

本文链接：https://blog.youkuaiyun.com/l_l_l_l_l_l_l_li/article/details/117302035

本文介绍了loader在Webpack中的作用，重点讲解了css-loader和style-loader的安装及使用，包括内联方式、CLI方式和配置方式，以及在webpack.config.js中的具体配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是loader？

loader 可以用于对模块的源代码进行转换；

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；

在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

2、css-loader和style-loader的安装

方法：npm install css-loader -D 安装css-loader
方法：npm install style-loader -D 安装style-loader

3、css-loader和style-loader的使用方案

3.1 内联方式（不常用）

方法：import "css-loader!../css/style.css"

在导入的样式前加上使用的loader，并且使用 !分隔,此方法不常用

3.2 CLI方式（不能用）

在webpack5的文档中已经没有了–module-bind；
实际应用中也比较少使用，因为不方便管理；

3.3 配置方式（常用）

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息

const path = require('path');
module.exports = {
  entry: "./src/main.js",//入口文件
  output: {//出口文件
    path: path.resolve(__dirname, "build"),
    filename:"bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
       test: /\.less$/,
         use: [
          'style-loader',
          'css-loader',
          'less-loader'
         ]
      }
   ]  
 }
}