How to precompile individual css/js files in assets? - ruby-on-rails

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.