react.js - webpack单独打包css文件问题 满足我的问题，赞加采纳

问题描述

问 题

我描述一下我现在面临的问题

需求：要做四十多个页面对于载入css问题，我想在顶层组件里面加载主要的共用css文件，然后每个模块对应的组件再import相应的css。

碰壁过程：用了传统的css-loader发现只是在head中内部样式表加载，其css代码还是在js文件中，之后为了解决这个bug，我找到了extract-text-webpack-plugin这个插件，用这个插件可以建立外部的css文件，不必担心组件中import的css在js文件里不舒服了,可是离我那个需求还是有一点距离，extract做的是生成一个css，然后这个入口文件里每个组件import的css都会拼接到它生成的这个最终的css里边，总是感觉有种模块划分不开感觉.

现状:主目录一个webpack.config配置文件，一个index.html 里边加载的是webpack-dev-server对应的js和css入口文件。

问题:难道extract-text就这些功能吗？有没有什么办法不让他拼到那一个css文件里，让他每次进入组件的时候加载一个新的css文件？另外我想听一下你们的看法.

 如下 全部拼接到了这个css文件里边.component组件依赖了一个css文件，所有的依赖，全部被extract-text 加载到了那个里边

解决方案

虽然我没有实践过，但是我可以提供一个思路，在require组件的时候用require.ensure()来取代require()：

• 你用require.ensure来require组件的话，可以强制webpack将组件打包成一个独立的小js文件(也就是一个独立的chunk)，然后配合上extract-text-webpack-plugin就可以把组件的css也独立生成为一个小css文件。

• 这个组件的js&css文件，在运行的时候webpack会帮你自动加载的，不用做特别的处理。

这篇关于react.js - webpack单独打包css文件问题 满足我的问题，赞加采纳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！