webpack（5）webpack处理css文件

css文件处理-准备工做

(如下项目配置都是基于上一篇webpack(4)的基础上)
在项目开发中，咱们必然须要添加不少的样式，而样式咱们每每写到一个单独的文件中。

这里咱们就在src目录中建立一个normal.css文件，代码以下：

body{
    background-color: aqua;
}

代码很简单，就是将body设置一个背景颜色，可是此时样式是不会生效的，由于咱们根本没有引用它，因此咱们须要在入口main.js中引入css

// 引用css文件
require('./css/normal.css')

 

安装loader并配置

准备工做处理完后，咱们须要安装2个loader

• style-loader 将模块导出的内容做为样式并添加到 DOM 中
• css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

安装命令以下：

npm install --save-dev style-loader css-loader

安装完成后咱们还须要在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

注意：这里use列表中的2个loader顺序是不能互换的，由于loader 是从右到左（或从下到上）地取值(evaluate)/执行(execute)。因此上面的示例是先执行css-loader加载样式文件后，再执行style-loader
 

实践结果

最后咱们使用npm run build就能够打包成功，而后访问index.html，页面呈现的颜色就是咱们normal.css样式中设置的颜色