縮小后角度 ui-select 中斷

Question

我目前需要維護一個使用 angular-ui-select 0.19.8 的 angular.js 1.5 應用程序。 我遇到的問題是，ui-select 在打包應用程序時會以某種方式中斷。 當使用grunt serve運行時，這部分：

<ui-select mandatory-field-marker
     multiple ng-required="true"
     ng-model="some.periods">
   <ui-select-match placeholder="Select some periods...">
     {{$item | period}}
   </ui-select-match>
   <ui-select-choices
        repeat="period in formCtrl.periods">
     <div ng-bind-html="period | highlight: $select.search"></div>
   </ui-select-choices>
</ui-select>

導致此輸出：

運行打包的應用程序時，它看起來像這樣：

這不僅僅是一個樣式問題，損壞的輸入字段在由於轉移到下一個組件而變得不可點擊之前不允許超過 10 個元素。

打包是用 grunt 完成的，據我所知，這些是用於縮小代碼的步驟：

• useminPrepare
• concat
• ngAnnotate
• imagemin
• autoprefixer
• cssmin
• usemin
• htmlmin

我找到了一些解決方法，例如降級 ui-select 並將匹配的類添加到<ui-select>和<ui-select-choices>但它們都不起作用。

bower 拉取的 ui-select 依賴似乎已經縮小了：

---

更新：這似乎是 grunt 和/或 bower 的問題。 重新配置托管網站的 Apache 后，我遇到了錯誤，即vendor.min.css丟失。 我在（由 bower 生成的）index.html 頭中找到了它說的部分：

<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

但是，只有bootstrap.min.css和main.min.css被打包到我的 dist 中：

還是不知道原因。

Answer 1

我已經修復了它，但不是很優雅。 問題是，select.css 和 ng-tags-input.css 沒有打包到 vendor.min.css 中，因此部署后它們會丟失。 我無法確定哪個 grunt-task 應該構建 vendor.min.css，但至少我知道誰應該做，沒有。 所以在 index.html 我改變了部分

<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

到

<!-- build:css(.) styles/select.min.css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<!-- endbuild -->
<!-- build:css(.) styles/ng-tags-input.min.css -->
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

現在有效。 這將是一個問題，如果將來有更多來自 bower_components 的 css 文件，但我正在談論的應用程序將在明年停止服務，所以沒關系。