CODEWITHSUNDEEP
cssember.jsyeomangruntjsbower
Joe Glorioso
Joe Glorioso

Reputation: 123

yeoman grunt build does not deploy component css

I'm new to Yeoman. I've generated an Ember.js project with 

$ yo ember

so I needed to install Twitter Bootstrap separately running 

$ bower install bootstrap

but running 

$ grunt build

does not deploy the component css files to the dist/styles directory in the same way that it does for js files to dist/scripts

How do I include component css files in my project distribution and reference them in my html?

Upvotes: 3

Views: 5287

Answers (2)

acme
acme

Reputation: 14856

When you are integrating the css in your html files you usually do it like this (I use bootstrap as example):

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

If you run grunt buildthis won't deploy the css files. To have them deployed in your project wrap it in the usemin comments, just like you do with the javascript stuff:

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

This will then deploy this css file as styles/bootstrap.css in your dist folder and update the references in your html files just like it does with the javascript references.

Upvotes: 8

passy
passy

Reputation: 7211

I recently added support for Twitter Bootstrap to the generator, so if you upgrade to the latest version you will get a prompt for it.

In general, if you want to reference components, you should not copy them around to the styles or scripts folder but link directly to the components folder, e. g.

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

Otherwise, you lose all the benefits of using a package manager except for the easier initial installation.

Upvotes: 1

Related Questions