Nacara allows you to customize your application style to match your design.

Main file

The main file for styling your application is docs/style.scss or docs/style.sass.

Try editing this file and see the site being updated.

Special folder

When your website becomes bigger, you will want to split your style file into smaller files.

Nacara has special folders to deal with that:

  • docs/scss: use this folder if you are using SCSS to write your style
  • docs/sass: use this folder if you are using SASS to write your style

When one of the files of these folders changes, Nacara will recompile your docs/style.scss or docs/style.sass.

Let's try it out, we are going to assume you use SCSS but the process is the same when using SASS.

  • Add the following code to the page you created earlier docs/tutorial/my-page

    <div class="my-text">
    This text should be bold and red.
  • Create a file docs/scss/my-style.scss

    .my-text {
        color: $danger;
        font-weight: $weight-bold;

    Because default layout of Nacara use Bulma, you have access to Bulma variables.

  • Include your file in style.scss

    @import './scss/my-style.scss';