有没有办法用webpack动态加载css文件

时间:2016-12-21 09:53:57

标签: css dynamic webpack webpack-2 code-splitting

Webpack有一个代码拆分feture(使用require.ensure或System.import),它使我们动态加载我们的js文件。但是我想知道是否有任何方法可以动态加载css文件?

因为我只在一次加载我的css文件时动态加载我的js文件,所以很奇怪。

在我的项目中,我将css文件放在单独的条目中,并使用extractTextPlugin将它们编译为额外的css文件。并将它们加载到链接标记中。

2 个答案:

答案 0 :(得分:1)

你可以,但是它们不会被加载为CSS文件(使用ExtractTextPlugin),而是来自JS,注入了style-loader(完全没问题)。

只有几件事要做。确保正确设置CSS / SASS / LESS /...-加载器。如果ExtractTextPlugin已经起作用,那么你就可以了。然后还要确保在fallbackLoader加载程序中将style-loader设置为allChunksfalse设置为默认值:ExtractTextPlugin.extract({})

此时,只需使用require.ensureSystem.import来输入/导入CSS文件,就像使用代码一样。感谢webpack的神奇之处,事情会神奇地起作用!

答案 1 :(得分:-1)

我成功使用以下设置为不同的租户动态加载样式。

https://github.com/shiranGinige/react-redux-starter-with-login/blob/master/README.md