上两节我们了解了webpack是如何打包js文件的，以及在打包js文件过程中还做了兼容性处理和语法检查的操作。这一节我们来看下webpack是如何处理css文件的。

我们知道，webpack只能识别js的内容，显然直接让webpack识别css文件是不可行的。那要如何将css文件中的内容转换成webpack可以识别的js内容呢？这里我们又需要借助“翻译官” loader 的帮助了。

要想将css转换成js，我们需要用到两个loader：style-loader 以及 css-loader。我们先来简单看下这两个loader的作用：

style-loader：生成style标签 ，将js中的css内容写入style标签中，并将其插入head标签中。

css-loader：将css内容变成 commonjs 模块加载到js中，里面的内容是样式字符串。

安装

yarn add -D style-loader css-loader

使用

在上一节中，我们了解到loader的执行是有顺序的，即按照从后往前的配置顺序执行。根据上面对两个loader的描述，我们需要先通过 css-loader 将css内容转换成js，然后通过 style-loader 将js中的css内容写入到style标签中。所以loader的顺序应该是 css-loader 先于 style-loader 执行。因此，我们需要在 webpack.config.js 中添加的配置如下：

const { resolve } = require('path')

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出
  output: {
    filename: '[name].js',
    //   __dirname表示当前文件所在目录的绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader配置
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配以css结尾的文件
        // 使用哪些loader包处理，执行顺序是从后往前
        use: [
          // 生成style标签，将js中的样式资源写入其中，并添加到head标签中
          'style-loader',
          // 将css的内容变成commonjs模块加载到js中，里面的内容是样式字符串
          'css-loader'
        ]
      }
    ]
  },
  // 插件
  plugins: [],
  // 模式 development / production
  mode: 'development'
}

配置完成后，我们先准备一个简单的css文件，保存在 src/css/index.css中：

html, body {
  padding: 0;
  margin: 0;
  background: #ff5512;
}

然后在入口 index.js 文件中引入 index.css 文件，之后执行打包操作。在打包生成的js文件中，我们就可以看到 index.css 中的内容：

之后，我们新建一个 index.html 文件，将打包之后的js文件引入页面，即可以看到样式生效。

sass-loader

在现阶段项目的开发过程中，我们经常会用到诸如 sass、less、stylus等等的 css预处理器。那应该如何让webpack可以识别出我们使用这些 css预处理器 写出的css代码呢？

其实也并不复杂，基本的思路就是使用对应 css预处理器 的 loader，将代码转换为普通的css代码，然后再通过 css-loader 与 style-loader 将css转换成js代码，并插入到页面的style标签中去。

本文中以 sass 为例。想要将 sass 代码转换为普通的css代码，我们需要安装两个工具：

yarn add -D sass sass-loader

之后只需要在 webpack.config.js 文件中加入相应的loader配置，并将文件匹配的正则调整下即可：

/* ... */
// loader配置
module: {
  rules: [
    {
      test: /\.s[ac]ss$/, // 匹配以.scss或者.sass结尾的文件
      // 使用哪些loader包处理，执行顺序是从后往前
      use: [
        // 生成style标签，将js中的样式资源写入其中，并添加到head标签中
        'style-loader',
        // 将css的内容变成commonjs模块加载到js中，里面的内容是样式字符串
        'css-loader',
        // 将使用sass编写的代码转换为普通的css代码 
        'sass-loader'
      ]
    }
  ]
},
/* ... */

修改完配置后，我们将 index.css 文件修改为 index.scss，并在其中加入sass的语法：

html, body {
  padding: 0;
  margin: 0;
  background: #ff5512;
  div {
    background: blue
  }
}

然后运行打包命令，打开打包后的js文件，我们可以看到sass的内容会被转换为普通的css内容：

预告

这一节我们知道了在webpack中如何对css文件做处理，以及在使用 css预处理器 时如何对其内容做相应的转换。

但是css的内容在转换过后，依旧存在于js文件中。随着我们项目开发的推进，打包出来的js文件会愈发庞大。除此之外，针对于不同平台以及不同设备，我们所写的css代码也需要做相应的兼容性处理。

针对以上的问题，我们下节一起来看下如何将js中的css代码提取成单独的文件，并对其做相应的兼容性与代码压缩处理。敬请期待~