Imagine to have application.css.scss in apps/web/assets/stylesheets and reset.css under .

The extensions structure is important. The first one is mandatory and it’s used to understand which asset type we are handling: .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 () is used to determine the right preprocessor.

Preprocessors are optional, an application can work with plain javascripts or stylesheets. In this case we have to name our assets with only one extension (eg application.css).

When we’ll load the page the compiler will preprocess or copy the assets into public/assets.

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

In order to use one or more of them, be sure to include the corresponding gem into your and require the library.

Some preprocessors may require Node.js. Please check the documentation.

We strongly suggest to use EcmaScript 6 for your next project, because that is the next version of JavaScript. It isn’t fully yet by browser vendors, but this is changing quickly.

As of today, you need to transpile ES6 code into something understandable by current browsers, which is ES5. For this purpose we support Babel.