javascript - 使用 Webpack 捆绑单独的 CSS

标签 javascript css webpack webpack-style-loader

我已经让 Webpack 与 style-loadersass-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 完成此操作?

最佳答案

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

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

关于javascript - 使用 Webpack 捆绑单独的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32553499/

相关文章:

Webpack DefinePlugin 缓慢。还有其他选择吗?

javascript - 在力有向图中突出显示节点及其邻居节点

javascript - 使用 Dygraphs 的主要刻度线和次要刻度线

javascript - 页面加载时的 Meteor 方法

javascript - 未定义指令的 AngularJS 链接函数

jquery - 添加类不会覆盖当前类

visual-studio - 在 typescript 中导入模块时绝对路径的根是什么?

node.js - 在 Angular2+Webpack 中使用 templateUrl 的相对路径

html - 我怎样才能给出这个元素的全宽?

css - 如何集成自定义样式的第三方网站页面?