使用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

如果使用的是一饮而尽，你应该第一个建筑物的jQuery UI的风格，然后通过管道供应商的风格，以一个build目录。 这样你就有了一个不会暴露你的源（bower_components）的编译CSS。 如果您不需要所有jQuery样式，请在单独的gulp任务中显式构建所需的样式，然后将其传递到主样式或继续构建的其余部分。 如果存在依赖关系链，这可能对您很重要。

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