CSSModules引入CSS文件所有class

文章参考

问题场景描述

用react写项目的时候，从阿里妈妈icon中引入了字体文件，想通过CSS引入相关字体。在根目录中直接import './assets/fonts/iconfont.css';，发现字体没有引入进来，调试发现相关的class也没有引入进来，有如下两个问题需要解决：

1. CSS 引入字体文件的路径不对
2. CSS 的class没有引入进来

CSS 引入字体文件的路径不对

原因

dva 中的webpack 无法找相对路径

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1539249101516'); /* IE9*/
  src: url('iconfont.eot?t=1539249101516#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

解决办法

在url前面添加“./”指明路径

@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1539249101516'); /* IE9*/
  src: url('./iconfont.eot?t=1539249101516#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

CSS 的class没有引入进来

原因

因为dva 采用的CSS module的方式处理CSS，即用到的class会引入进来，但是我只是引入了CSS文件，但是没有明确引入具体的某个class，这样就导致webpack认为我没有使用CSS的中的class

解决办法

1. 使用:global{}将需要的class全部包裹起来，认为这个是全局定义的，即全部要用，但是不需要处理的；
2. 将文件名改为“scss”文件，让webpack来处理它，转为最终需要的css文件

:global {
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-HSEguanli:before {
    content: "\e629";
}
}