Webpack 4.x 使用mini-css-extract-plugin分离scss失败的坑

楼主最近从移动端转前端有段时间了，目前还是在学习和探索前端的阶段，最近一直在给一个新的项目打基础的脚手架，慢慢的学习webpack 的配置。

如题，当配置到分离css文件的时候，网上大面积的还是extract-text-webpack-plugin这个插件，但是这个插件在webpack 4.x已经用不了，各种报错啊，然后就换成了mini-css-extract-plugin这个插件。

按照网上配置写好后，配置如下：

我试了一下，打包css文件，ok没问题，能正常的分离和引用，但是当我来分离scss文件的时候，就出问题了，死活打不出css文件，分离出来的css一直是空的，如图：

css文件里面所有的样式都丢失了。然后试了几次，依旧是没有任何样式，接下来楼主就开始了，各种百度和google，都没找到解决方案，其中也看到有些人碰到了一样的问题，但是没有一个人解决。

就在我苦恼的快要吐血的时候，突然注意到我在之前的配置中添加的消除冗余css的插件purifycss-webpack，也就是上面截图中的PurifyCssWebpack这个，这个插件的这行配置是用来扫描所有html文件，然后将里面所有没有用到css样式给删掉。这时候突然好像想到了什么，二话不说，把这个插件注释掉，然后重新打包。果不其然，去掉这个插件，scss文件样式就成功分离出来：