我在我的元素中使用 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 主题？
最佳答案
如果您使用 gulp，您应该首先构建您的 jQuery UI 样式，然后将供应商样式通过管道传输到构建目录。这样你就有了一个不公开你的源代码的编译 CSS (bower_components)。如果您不需要所有 jQuery 样式，请在单独的 gulp 任务中显式构建您需要的样式，然后将其通过管道传输到您的主要样式中或继续构建的其余部分。如果存在依赖链，这对您可能很重要。
TL;DR 您的 HTML 应该只链接到已编译的样式，而不是源代码。
关于html - 使用 gulp-useref 构建应用程序时尊重 CSS @import，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23650104/