Hanami is able to run assets preprocessors and lazily compile them under
Imagine to have
The extensions structure is important.
The first one is mandatory and it’s used to understand which asset type we are
.css for stylesheets.
The second one is optional and it’s for a preprocessor:
.scss for Sass.
For a given asset
application.css.scss, the last extension (
.scss) is used to determine the right preprocessor.
# apps/web/application.rb require 'sass' module Web class Application < Hanami::Application configure do # ... assets do sources << [ # apps/web/assets is added by default 'vendor/assets' # app/web/vendor/assets ] end end end end
From a template we do:
<%= stylesheet 'reset', 'application' %>
When we’ll load the page the compiler will preprocess or copy the assets into
$ tree public public/ └── assets ├── application.css └── reset.css
Preprocessors will compile/copy assets only if the Compile mode is on.
Preprocessors are enabled by default in development and test environments.
For performance reasons, this feature is turned off in production env, where we should precompile our assets.
In order to use one or more of them, be sure to include the corresponding gem into your
Gemfile and require the library.
# Gemfile # ... gem 'sassc'
Some preprocessors may require Node.js. Please check the documentation.
As of today, you need to transpile ES6 code into something understandable by current browsers, which is ES5. For this purpose we support Babel.
Babel requires Node.js.