# Compiling Provided Component Styles

{% content-ref url="/pages/-MiWI4PpOevDv\_k-b2y9" %}
[Install Needed YARN and Gulp Tools](/9.1.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.1.x/developers/extending-varbase/check-standards-practice-coding-and-linting.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.varbase.vardot.com/9.1.x/developers/extending-varbase/compiling-provided-component-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.