html - 使用 gulp-useref 构建应用程序时尊重 CSS @import

Question

我在我的元素中使用 jQuery UI 并使用 gulp 构建它。我通过以下方式包含它的样式:

<!-- build:css styles/vendor/jqueryui.css -->
<link rel="stylesheet" href="bower_components/jqueryui/themes/base/jquery.ui.all.css">
<!-- endbuild -->

当我用 gulp-useref 构建它时插件，它变为:

<link rel="stylesheet" href="styles/vendor/jqueryui.css"/>

问题在于 styles/vendor/jqueryui.css 的内容如下所示:

@import "jquery.ui.base.css";@import "jquery.ui.theme.css";

这些导入显然在分发包中失败，因为没有jquery.ui.base.css 和jquery.ui.theme.css 文件。它们没有从 bower_components/jqueryui/themes/base/ 移动到 dist 包。

如何在指定所有jquery.*.css 文件的情况下正确包含jQuery UI 主题？

Answer 1

如果您使用 gulp，您应该首先构建您的 jQuery UI 样式，然后将供应商样式通过管道传输到构建目录。这样你就有了一个不公开你的源代码的编译 CSS (bower_components)。如果您不需要所有 jQuery 样式，请在单独的 gulp 任务中显式构建您需要的样式，然后将其通过管道传输到您的主要样式中或继续构建的其余部分。如果存在依赖链，这对您可能很重要。

TL;DR 您的 HTML 应该只链接到已编译的样式，而不是源代码。