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

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

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

按照网上配置写好后,配置如下:

Webpack 4.x 使用mini-css-extract-plugin分离scss失败的坑_第1张图片

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

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

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

Webpack 4.x 使用mini-css-extract-plugin分离scss失败的坑_第2张图片

我还一度怀疑是mini-css-extract-plugin这个插件有bug,只能分离css文件,不能分离scss和less文件,到底还是自己的问题,还是自己太菜了。

我大概想了一下原因,可能在打包过程,PurifyCssWebpack去扫描html文件,发现分离出来的scss样式,没有被html引用,然后里面的所有css样式都被删掉了,并不是没有打包成功,只是被删掉了~~~em。。。只能瞎猜一下,哈啊哈哈哈,等后面再研究研究,看看到底是啥原因导致所有样式都被删除了。

先这样,把这个新手踩的坑记录一下,毕竟也是花了两天的时间找到问题所在(吐血ing),等后面找到具体原因在回来更新一发~~~

今天(2020-08-06)又尝试了下,果然验证了自己太菜的原因,PurifyCssWebpack这个插件的文件扫描路径没写对,之前一直是按照网上各种文档写的那样

完全没有考虑自己项目目录结构,导致根本找不到html文件,所有每次打包之后所有的css样式都被删了,正确的方式就是根据自己的实际项目文件目录来配置路径,如下:

Webpack 4.x 使用mini-css-extract-plugin分离scss失败的坑_第3张图片

这是自己尝试的路径配置,实际测试发现,只去扫描html文件,css同样自会被删除,为什么呢,因为的html模板中,根本就没有直接引用任何css/scss文件,打包的时候还是会被PurifyCssWebpack插件删掉,所有我有加上了实际引用css/scss文件的js、jsx文件进行扫描,果然打包之后的css样式没有再被清除

虽然样式没有被删除了,但又有新的问题,就是PurifyCssWebpack插件的去除冗余css的作用根本没用了,不知道是我的用法不还对,还是MiniCssExtractPluginPurifyCssWebpack这两插件不能共用,或者是webpack 4.x之后需要有新的去除冗余css插件来配合MiniCssExtractPlugin插件使用,先到这把,后续找到解决办法再来更新。

你可能感兴趣的:(前端,webpack,css,javascript)