How to precompile individual css/js files in assets?

Question

I am trying to setup GitLab on my local machine in development env from source.

Please note that I am completely new to Ruby on rails development as my field is PHP.

I followed instructions from https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/install/installation.md where I replaced RAILS_ENV=production with RAILS_ENV=development where appropriate and also tweaked some config files.

All installations steps went smooth, however when I open the gitlab page, it tries to load css and js files that are not present:

...
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.atwho.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/select2.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/highlightjs.min.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dropzone/basic.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/print.css?body=1" media="print" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
...

I noticed that after I do

sudo -u git -H bundle exec rake assets:precompile RAILS_ENV=development

the only css files that are put into public/assets/ folder are

application-4979ead805bf0eb7d853f1e0104f87ef.css
application-4979ead805bf0eb7d853f1e0104f87ef.css.gz

According to css assets not precompiling in production I added this line

config.assets.precompile += ['*.css', '*.js']

in config/environments/development.rb . However now when I try to precompile assets, I get an error

...
rake aborted!
Sass::SyntaxError: Undefined mixin 'border-radius'.
  (in /home/git/gitlab/app/assets/stylesheets/generic/avatar.scss:6)
/home/git/gitlab/app/assets/stylesheets/generic/avatar.scss:6:in `border-radius'
...

Does anyone know how to fix it?

Thanks!

Answer 1

Error

The error can be fixed by including the @border-radius mixin in your avatar.css.scss stylesheet. We typically use a variables.css.scss stylesheet, where our mixins are defined:

#app/assets/stylesheets/variables.css.scss
@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   -o-border-radius: $radius;
   border-radius: $radius;
}

#app/assets/stylesheets/avatar.css.scss
@import 'variables';

This should give you the ability to call the mixin in your avatar stylesheet, which should fix the error you're receiving

--

Precompilation

Typically, if you wanted to add a specific CSS file to your pre-compilation path, you'll have to do this:

#config/environments/production.rb
config.assets.precompile += ['avatar.css']

Precompilation is only recommended for production environments, as if you precompile in development, how are you going to track / manage changes? Bottom line is you won't.

Here's what the Rails docs say about it:

In the production environment Sprockets uses the fingerprinting scheme outlined above. By default Rails assumes assets have been precompiled and will be served as static assets by your web server.