WebPack / CSS Module 配置

2021-04-20 · 周二紧张阴

在今天的工作任务中，主要接触了某新项目的前端。该项目采用 DvaJS 作为脚手架搭建 React 后台，采用 Redux 进行状态管理。我的第一个任务是基于它创建一个副本，替换 Logo，并修改为 SVG 格式，于是去研究了一下 WebPack 的 Loader。

{
  test: /\logo.svg$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
    limit: 8192
  }
}

正则匹配到 logo 结尾的 svg 文件，都使用 file-loader 去加载，这样得到的就是一串 url 了。此前 svg 是 babel-loader，会转成一个组件形式。如果是用 url-loader，则是变成了一个 base64 的组件，也是用不了的。为了保持简洁，我认为它应该和 jpg 等图片一样直接引入页面。

另外在移植项目的时候接触到了 IM 的部分，出现了个很奇怪的报错，然而没有任何代码注释，我也看的挺懵逼的，最后还是找了原作者，确定了下这块的用途，才知道主要是没做 length 判断导致的。这里 OK 了，但还有一个相似的地方出错，暂时注释之后代码正常运行了，然后通过 IM 发了条消息之后再取消注释，这里竟然又可以正常获取属性了...

在修改某动画组件的时候，碰到了 classnames 和 CSS Modules。前者的条件判断用三元或者 && 均可，后者如果存在子类，就直接拿子类名称作为索引获取就好。

import styles from './homeLayout.less'

// .animate-button{}
// .animate-button.active{}

// styles["active"] 拿到 active 的 CSS 属性，丢到 classnames 里面就是它的类名
// toggled 为是否鼠标点击激活的 State，true 的情况下带上 styles.active，反之不带

<div className={classnames(styles["animate-button"], (toggled && styles.active))}></div>

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟，内容均为个人原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！如本站内容对你有所帮助的话，不妨捐助支持一下？

WebPack / CSS Module 配置

Paul

近期评论