No styles after running build process

[haydenbleasel]

I'm having an issue where, after running either grunt (and manually opening dist/index.html) or grunt serve, styles aren't being copied to the dist folder, which results in no styles being applied to the page. I've detailed the build log in this gist. There's a prominent error at line 116:

Running "cssmin:generated" (cssmin) task
>> Destination not written because minified CSS was empty.

The closest issues I've found so far (but not the same) are:

• No css styles with yeoman server:dist yeoman#411
• .bowerrc and the story of how I lost all my hair generator-webapp#204
• Updates to CSS or JS only come through when adding or removing lines. generator-webapp#174

Also, I'm running the latest version of yo and generator-webapp on Mac OSX 10.9.

[oskarrough]

And your styles are not being copied to the hidden folder dist/.tmp? Otherwise perhaps you could zip your webapp to me and I'll test it on my setup.

[haydenbleasel]

@oskarrough - Emailed the archive to you. It's a fresh build of webapp, just run npm install to grab the dependencies.

[haydenbleasel]

Okay @oskarrough and I fixed it via email. For anyone who has this error, it's a Compass issue. Check your Ruby (ruby -v), Sass (sass -v) and Compass (compass version) versions. Running compass version gave me the following error:

/Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247@global/gems/bundler-1.3.5/lib/bundler/definition.rb:16:in `build': /Gemfile not found (Bundler::GemfileNotFound)
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247@global/gems/bundler-1.3.5/lib/bundler.rb:148:in `definition'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247@global/gems/bundler-1.3.5/lib/bundler.rb:116:in `setup'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247@global/gems/bundler-1.3.5/lib/bundler.rb:132:in `require'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247/gems/compass-0.12.2/bin/compass:26:in `<top (required)>'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247/bin/compass:23:in `load'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247/bin/compass:23:in `<main>'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `eval'
    from /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `<main>'

Searching the internet a bit, I found a related issue. Next, I ran the following command to uninstall rubygems-bundler from the global scope:

gem uninstall -i /Users/haydenbleasel/.rvm/gems/ruby-2.0.0-p247@global rubygems-bundler

This allowed compass version to work, which in turn fixed the build process for the webapp generator.

All good now homies.

@eddiemonge

[ecurtis]

I am getting this same behavior, however I get no errors when running the version commands you mentioned:

$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]

$ sass -v
Sass 3.2.13 (Media Mark)

$ compass version
Compass 0.12.2 (Alnilam)

Any other ideas on how to fix?

[haydenbleasel]

@ecurtis - Run gem list and show us the list of local gems you have installed.

[ecurtis]

Thank you for the quick response. Here are the results:

CFPropertyList (2.2.5, 2.2.4, 2.2.0)
chunky_png (1.2.9)
compass (0.12.2)
fssm (0.2.10)
libxml-ruby (2.7.0, 2.6.0)
mini_portile (0.5.2, 0.5.1)
nokogiri (1.6.1, 1.6.0, 1.5.6)
sass (3.2.13, 3.2.12)
sqlite3 (1.3.8, 1.3.7)

[haydenbleasel]

@ecurtis - I think it might be because you have 2 versions of SASS installed (3.2.13 and 3.2.12). Try uninstalling SASS and Compass explicitly (gem uninstall compass and gem uninstall sass) then re-install just Compass (gem install compass) since Compass carries SASS as a dependency.

[ecurtis]

Thank you for the suggestion, however that did not solve it. Here is the updated gem list:
CFPropertyList (2.2.5, 2.2.4, 2.2.0)
chunky_png (1.2.9)
compass (0.12.2)
fssm (0.2.10)
libxml-ruby (2.7.0, 2.6.0)
mini_portile (0.5.2, 0.5.1)
nokogiri (1.6.1, 1.6.0, 1.5.6)
sass (3.2.13)
sqlite3 (1.3.8, 1.3.7)

[haydenbleasel]

@ecurtis - Interesting. Check if it's a fault on the SASS level by running sass --watch main.scss:main.css and seeing what happens. Otherwise, you could try uninstalling your gems / running Grunt / reinstalling your gems to determine whether that's the problem.

[ecurtis]

I will dive into some more tomorrow. I take it that a fresh install of the generator works well for you. Are you on OS X? If so which version? Also which version of sass, compass, and ruby are you running?

[haydenbleasel]

Ruby 2.0.0p247, Compass 0.12.2 (Alnilam), Sass 3.2.12 (Media Mark), Mac OSX 10.9.1.

[ecurtis]

I ran npm update -g and now while I get the error it is outputting the css to the dist folder. So I guess we are good to go!

In case it is of interest prior to running the npm update, it was outputting some css, but not the:

@import 'sass-bootstrap/lib/bootstrap';

So most styles were off.

Thank you for your help. Cheers.

[josephdpurcell]

I am having this issue too. I'm at a complete loss; any help would be greatly appreciated!

$ ruby -v
ruby 2.0.0p195 (2013-05-14 revision 40734) [x86_64-darwin12.3.0]
$ sass -v
Sass 3.2.18 (Media Mark)
$ compass version
Compass 0.12.4 (Alnilam)
Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

The following works fine:

sass --watch main.scss:main.css

However, I get the issue just like Hayden described. Here is my grunt --debug --verbose output for cssmin:

Running "cssmin:generated" (cssmin) task
[D] Task source: /Users/jpurcell/src/sites/myapp/node_modules/grunt-contrib-cssmin/tasks/cssmin.js
Verifying property cssmin.generated exists in config...OK
Files: [no src] -> dist/styles/vendor.css
Files: .tmp/styles/main.css -> dist/styles/main.css
Options: report=false, root="app"
>> Destination not written because minified CSS was empty.
Reading .tmp/styles/main.css...OK
Reading .tmp/styles/main.css...OK
Writing dist/styles/main.css...OK
File dist/styles/main.css created.

What is perplexing to me is that after building I get a file: dist/styles/eec6e6bc.main.css. If I change the app/index.html file to point the main.css to eec6e6bc.main.css all the styling works!

Possibly related, is that if I look at the console log for any 404s this returns a 404: /styles/vendor.css. But, I don't see any files vendor.css.

Any thoughts?

[moneytree-doug]

👍 Has anyone figured out a way to fix this?

[silvenon]

I'll investigate.

[dustintheweb]

Make sure your packages are up to date, worked for me

$ npm install -g npm-check-updates
$ npm-check-updates -u
$ npm install

also, yeoman

$ npm install -g yo

[silvenon]

We have a pending PR which updates all deps, I just have to test it first.

[silvenon]

Just released v0.6.0, lots of things has changed and this should work now. I'll reopen if you are still experiencing issues with this.

[sebastianha]

I just used the generator-webapp to generate a new app with bootstrap only and first it looks fine, grunt:serve works as expected.

But when I build the project the Bootstrap CSS seems to miss and the web page is displayed like on the screenshot of the first post here.

I updated everything to the latest version but could not figure out what's wrong. Can anyone help me?

[silvenon]

Does this happen with the fresh install? Did you modify your Gruntfile.js or index.html? If yes, could you tell us what you changed?

[sebastianha]

I did a fresh install, just "yo webapp", selected bootstrap only and then did a "grunt serve" (which works well) and then a "grunt" or "grunt build". This results into an empty "vendor.XXX.css" file. When I replace this file with the original "bootstrap.css" everything is fine.

Here is a list of my installed versions:
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[silvenon]

Thanks for reporting. The solution is very simple, change this line:

<!-- build:css styles/vendor.css -->

to this:

<!-- build:css(.) styles/vendor.css -->

[sebastianha]

Thank you very much, works now!

[wilsonbradleyc]

I'm having this same problem. I just created a new project using 'yo angular StockDog' and the CSS is not found for the default app. (I'm going through 'Professional AngularJS -> Wrox)

During set up, I did not include Sass w/Compass, but did select to use Bootstrap.

index.html has the correct build:ccs line (I didn't have to change it):

<!-- build:css(.) styles/vendor.css -->

[silvenon]

This is an issue with generator-angular then, not generator-webapp.

[wilsonbradleyc]

Ok thanks. I'll move the discussion over there.

[TeChn4K]

Thank you @silvenon, your solution works. But ... all vendors images path are broken... Any solution ?

EDIT : i use dw-bxslider-4 and fontawesome. And my generated vendor.css contains wrong image and font path

[silvenon]

@TeChn4K unfortunately you'll have to do some hacking to fix these paths, this is not really something we can solve. gulp-replace might be helpful.

[TeChn4K]

OK thank you, i'll give it a try.
If someone have a draft solution to this problem I will be grateful :)

[silvenon]

StackOverflow is great for these kinds of questions, with tags #yeoman and #grunt in this case. I suggest giving more details if you decide to ask there.