Webpack5 系列（二）：静态资源的处理4

2023-07-02 118

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Webpack5 系列（二）：静态资源的处理4

四、补充：css-loader 的 options

不同的 loader 都会有各自的 options，css-loaders 有两个实用的 options。

importLoaders：The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources and CSS modules/ICSS imports. 简单来说，就是允许你在执行 css-loader 前，让某些资源要经过前面的 loaders 去处理的个数。
modules：Allows to enable/disable CSS Modules or ICSS and setup configuration. 允许你开启 CSS Module。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sc?ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
              modules: true, // 默认是 false ***
            },
          },
          "sass-loader",
          "postcss-loader",
        ],
      },
    ],
  },
};

注意，上面 importLoaders 设置为 2，表示匹配到样式文件时，都会去执行一开始的两个 loader，也就是 'sass-loader' 以及 'postcss-loader'.

至于 modules 设置为 true，则保证了样式模块的独立性，不会被互相覆盖。具体看下面的例子：

a) 不设置 modules 选项

src/assets/styles/global.scss

// 自定义变量
$color: #ff4200;
$fs: 14px;
$ls: 1.2;
// 自定义mixin
@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}
body {
  font-size: $fs;
  background-color: #eaeaea;
  .avatar {
    @include size(150px);
    transform: translateX(50px);
  }
}

src/assets/js/createImg.js

import avatar from "../images/avatar-2.jpg";
import dog1 from "../images/animal-dog-1.png";
function createImg(root) {
  const img = new Image();
  img.src = dog1;
  img.classList.add("avatar"); // 添加 avatar 类名
  root.append(img);
}
export default createImg;

src/index.js

import "./assets/styles/reset.css";
import "./assets/styles/global.scss";
import dog1 from "./assets/images/animal-dog-1.png";
import createImg from "./assets/js/createImg.js";
const dom = document.getElementById("root");
// 第一张图的创建
createImg(dom);
// 第二张图的创建
// insert an image
const img = new Image();
img.src = dog1;
img.classList.add("avatar"); // // 添加 avatar 类名
root.append(img);

在这种情况下，import './assets/styles/global.scss'这一句对全局的文件都有效果，因此它的后一句 import createImg from './assets/js/createImg.js'; 就会受到影响。影响的结果就是，createImg.js 文件中的第 7 行代码的样式添加，添加的就是 global.scss 中的第 15 行的选择器 'avatar' 的样式。

打包后，结果如图所示：

b) 将 modules 设置为 true

设置完后，代码不变的情况下，打包完成后，查看结果如图所示：

前后两张秋田犬均变成了超大的图，原因是样式没有作用到图片上。

当应用 CSS Module 时，要通过以下的方式添加样式：

（注意：这里仅对 index.js 中的代码作修改，使之恢复，而 createImg.js 模块中的代码不变，从而形成对比。）

src/index.js

、

import "./assets/styles/global.scss";
import style from "./assets/styles/global.scss"; // 自定义变量名称，作为 css module 导入
import dog1 from "./assets/images/animal-dog-1.png";
import createImg from "./assets/js/createImg.js";
const dom = document.getElementById("root");
// 第一张图的创建
createImg(dom);
// 第二张图的创建
// insert an image
const img = new Image();
img.src = dog1;
// css module 的使用：通过自定义变量名称 style 加 . 的形式访问到 avatar 类名
img.classList.add(style.avatar); 
root.append(img);

打包后，结果如图所示：

通过对比，就可以发现，通过模块方式设置的秋田犬的样式是有的，而第一张则没有。

这种利用 CSS Module 的方式来添加样式的方法，解决了全局覆盖同名样式（一般是类名和 id）的尴尬情况。

阅读参考：

小结

以上，是本篇的所有内容。在 Webpack5 中，对于静态资源的处理，我们只要简单地设置 type 就能处理文件，非常方便。但是有些特殊情况还是需要去单独处理的，例如资源输出的路径及文件名的设置、URI 编码格式的设置、转 base64 的文件大小限制的设置。样式文件中，为了防止全局的样式污染，可以开启 CSS Module 来避免。

添加我的微信：enjoy_Mr_cat，共同成长，卷卷群里等你 🤪。

以上，感谢您的阅读～

Webpack5 系列（二）：静态资源的处理4

四、补充：css-loader 的 options

a) 不设置 modules 选项

b) 将 modules 设置为 true

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景