使用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文件.他们没有被转移到dist包bower_components/jqueryui/themes/base/.

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

Answer 1

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

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