Webpack打包css到js中css样式不起效果

csu_zipple

于 2019-10-09 10:02:46 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端杂事

本文链接：https://blog.csdn.net/csu_passer/article/details/102454749

前端杂事专栏收录该内容

205 篇文章

订阅专栏

本文探讨了在使用webpack打包项目时，去除MiniCssExtractPlugin.loader导致CSS无法加载至DOM的问题。详细分析了css代码如何被导出并指出缺少style-loader是问题所在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天通过修改webpack的moudle.rules属性来将css打包到js中，其实就是去除了MiniCssExtractPlugin.loader。

这样能够实现打包效果，但却在项目中引用时发现css无法加载到dom上。

通过分析打包后的js文件，可以发现css代码都是被exports.push到exports变量中了。

exports.push([module.i, "/* left-menu */\n.left-nav {\n  background: #f0f2fa;\n  z-index: 100;\n  height: 100%;\n  transition: width .2s linear;\n}\n........])

打开调试面板，发现dom节点上没有style，也就是说js并没有将css代码插入到style标签中。再分析一下我们的打包loader，发现是缺少了style-loader…