javascript - 使用 Webpack 捆绑单独的 CSS

Question

我已经让 Webpack 与 style-loader 和 sass-loader 一起工作，但无法弄清楚一件事:

我有两个独立的“样式表”包(我们的普通应用程序和一个为客户定制的皮肤版本)。如果我单独需要它们，它仍将输出为 1 个文件 (bundle.css)。我还尝试将 sass 源文件设置为入口点，但这给了我这个错误:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/slangbroek/Projects/app-name/app/src/styles/mobile/mobile in /Users/slangbroek/Projects/app-name/app/src

对于两个样式表入口点。有没有人知道如何使用 Webpack 完成此操作？

Answer 1

您可以使用两个 .js 入口点，一个用于普通应用程序，一个用于自定义皮肤版本。如果唯一的区别是样式表，您可能需要 3 个入口点，一个用于两个元素使用的应用程序 .js，另一个入口点用于每个 .scss 文件。所有这些入口点文件都需要样式表。

这很奇怪，但我相信那是唯一的纯 webpack 解决方案。当然，您可以考虑将 webpack 与 gulp/grunt/etc 结合使用，并使用任务运行器与 webpack 捆绑并编译您的 scss 文件。