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

Posted 2023-02-19

【中文标题】有没有办法用webpack动态加载css文件

【英文标题】：is there any way to dynamically load css file with webpack

【发布时间】：2017-05-06 16:53:02

【问题描述】：

Webpack 有一个代码拆分功能（使用 require.ensure 或 System.import），它可以让我们动态加载我们的 js 文件。但我想知道是否有任何方法可以动态加载 css 文件？

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

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

【问题讨论】：

有人可以提供代码吗，我也想做，但没有其他帖子描述这里讨论的部分。请:)

【参考方案1】：

你可以，但它们不会作为 CSS 文件加载（使用 ExtractTextPlugin），而是从 JS 中加载，并注入 style-loader（完全可以）。

只有几件事要做。确保正确设置 CSS/SASS/LESS/...-loaders。如果 ExtractTextPlugin 已经可以工作，那你就很好了。然后还要确保在 ExtractTextPlugin.extract() 加载程序中将 fallbackLoader 设置为 style-loader（并将 allChunks 设置为默认值：false）。

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

【讨论】：

好像不行。可以举个例子吗？

webpack 编译 css 文件。但是，System.import('cssfile') 不会加载 css 文件。

好的，我明白了。我好像做错了什么。无论如何，它现在有效。非常感谢

嗨。上面的 cmets 是几个月前的，但你能帮我看看适合你的具体配置吗？我有同样的要求，但到目前为止还没有成功。我使用 amd，下面是我的 css 加载器配置。 test: /\.css$/, loader: ExtractTextPlugin.extract( fallback: "style-loader", use: "css-loader", publicPath: "./" )

【参考方案2】：

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

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