处理样式资源

本章节我们学习使用 Webpack 如何处理 Css、Sass、Scss 样式资源

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2. 功能介绍

• css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
• style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

3. 配置

rules: [
  {
    // test接收一个正则的规则，用来匹配 .css 结尾的文件
    test: /\.css$/,
    // use 数组里面 Loader 执行顺序是从后到前
    use: ["style-loader", "css-loader"],
  },
],

处理 Sass 和 Scss 资源

1. 下载包

npm i sass-loader sass -D

注意：需要下载两个

2. 功能介绍

• sass-loader：负责将 Sass 文件编译成 css 文件
• sass：sass-loader 依赖 sass 进行编译

3. 配置

rules: [
  {
    // 用来匹配 .css 结尾的文件
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
  },
  {
    // 用来匹配 .s[ac]ss 结尾的文件
    test: /\.s[ac]ss$/,
    use: ["style-loader", "css-loader", "sass-loader"],
  }
]