如何在资产中预编译单个css / js文件？

Question

我正在尝试在源代码的开发环境中在我的本地计算机上设置GitLab。

请注意，我对Ruby on rails开发是全新的，因为我的字段是PHP。

我按照说明进行操作 https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/install/installation.md我在适当时将RAILS_ENV=production替换为RAILS_ENV=development，并调整了一些配置文件。

所有安装步骤都很顺利，但是当我打开gitlab页面时，它会尝试加载不存在的css和js文件：

...
<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>
...

在我做完之后我注意到了

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

放入public/assets/文件夹的唯一css文件是

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

根据css assets not precompiling in production我添加了这一行

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

config/environments/development.rb中的

。但是现在当我尝试预编译资产时，我收到错误

...
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'
...

有谁知道如何修复它？

谢谢！

Answer 1

错误

可以通过在@border-radius样式表中加入avatar.css.scss mixin来修复错误。我们通常使用variables.css.scss样式表，其中定义了mixins：

#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';

这可以让您在mixin样式表中调用avatar，这样可以解决您收到的错误

-

<强>预编译

通常，如果您想在预编译路径中添加特定的CSS文件，则必须执行以下操作：

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

仅建议production环境进行预编译，就像您在开发中预编译一样，您将如何跟踪/管理更改？底线是你赢了。

这是Rails docs对此的评价：

  

在生产环境中，Sprockets使用指纹识别方案   概述如上。默认情况下，Rails假定资产已经过预编译   并将由您的网络服务器作为静态资产提供。