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

标签 css dynamic webpack webpack-2 code-splitting

Webpack 具有代码拆分功能(使用 require.ensure 或 System.import),这使我们能够动态加载 js 文件。但是我想知道有没有办法动态加载css文件?

这太奇怪了,因为我动态加载我的 js 文件,而我只一次性加载我的 css 文件。

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

最佳答案

你可以,但它们不会作为 CSS 文件加载(使用 ExtractTextPlugin),而是从 JS 加载,注入(inject)样式加载器(这完全没问题)。

只有几件事要做。确保您正确设置了 CSS/SASS/LESS/...-loader。如果 ExtractTextPlugin 已经可以工作,那你就很好了。然后还要确保将 fallbackLoader 设置为 style-loader(并将 allChunks 设置为默认值:false)在您的 ExtractTextPlugin.extract({}) 加载器中。

此时,只需使用 require.ensureSystem.import 来要求/导入您的 CSS 文件,就像您对代码所做的那样。多亏了 webpack 的魔力,一切都会神奇地工作!

关于css - 有没有办法用webpack动态加载css文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41259838/

相关文章:

c6386 写入时缓冲区溢出

c++ - 0x771CC7C9 (ntdll.dll) 处未处理的异常

webpack - 为什么 chrome-dev-tools 无法在 promise 中正确反射(reflect) 'this' ?

javascript - 无法使用 webpack 和 redux-react 获取模拟

javascript - ionic 未捕获错误 : Cannot find module "." when importing a service provider

javascript - 在父容器中控制子容器滚动条

html - 如何控制 yii2 detailView 中的行高和单元格填充?

css - 导航菜单可点击区域延伸到导航按钮之外

css - 垂直居中翻转图像?

c# - 将动态 JSON 发布到 MVC4 操作