> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/9.2.x/developers/extending-varbase/compiling-provided-component-styles.md).

# Compiling Provided Component Styles

{% content-ref url="/pages/-MiWI4PpOevDv\_k-b2y9" %}
[Install Needed YARN and Gulp Tools](/9.2.x/developers/extending-varbase/install-needed-tools.md)
{% endcontent-ref %}

{% hint style="info" %}
In case of wanting to add a new feature or fix a bug in styling for a selected Varbase component.
{% endhint %}

## Get Needed Yarn Development Dependencies

```
yarn install
```

## Initialize

Initialize the gulp SASS files styling method. Run this only ones for each newly cloned project.

```
yarn theme:init
```

## Theme Build

Compile source `.scss` files to `.css` files. Needs to compile manually on demand.

```
yarn theme:build
```

## Watch

Watch source `.scss` files and compile them on saving to `.css` files. Auto compiling on save of changes for the source.

```
yarn theme:watch
```

{% hint style="warning" %}
After any change of code please check the standards before uploading a patch or creating a MR.
{% endhint %}

{% content-ref url="/pages/-MiWJvSwRjDTjueuffAj" %}
[Check Standards/Practice Coding And Linting](/9.2.x/developers/extending-varbase/check-standards-practice-coding-and-linting.md)
{% endcontent-ref %}