css - yeoman grunt build 不部署组件 css

Question

我是约曼的新手。我已经生成了一个 Ember.js 项目

$ yo ember 

所以我需要单独安装 Twitter Bootstrap

$ bower install bootstrap 

但运行

$ grunt build

不会像将 js 文件部署到 dist/scripts 那样将组件 css 文件部署到 dist/styles 目录

如何在我的项目分发中包含组件 css 文件并在我的 html 中引用它们？

Answer 1

当您将 css 集成到您的 html 文件中时，您通常会这样做（我使用 bootstrap 作为示例）：

<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">

如果你运行grunt build这将不会部署 css 文件。要将它们部署在您的项目中，请将其包装在usemin注释中，就像您使用 javascript 内容一样：

<!-- build:css styles/bootstrap.css -->
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
<!-- endbuild -->

然后，这会将这个 css 文件部署styles/bootstrap.css到您的dist文件夹中，并更新您的 html 文件中的引用，就像它对 javascript 引用所做的那样。

Answer 2

我最近在生成器中添加了对 Twitter Bootstrap的支持，所以如果你升级到最新版本，你会得到一个提示。

一般来说，如果你想引用组件，你不应该将它们复制到stylesorscripts文件夹，而是直接链接到 components 文件夹，例如

<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>

否则，您将失去使用包管理器的所有好处，除了更容易的初始安装。