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 UI主题不用指定所有jquery.*.css个文件？

Answer 1

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

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

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

1 个答案: