Styling your Components


Edit this page

LESS is a preprocessor based on JavaScript. It provides the ability to use mixins, variables, and other programmatic tools, making styling code cleaner and less redundant.


To utilize LESS in a Solid app, it will need to be installed as a development dependency:

Using LESS in your app

Start by creating a .less file in the src directory:

.foo {
color: red;
.bar {
background-color: blue;

The basic syntax of LESS is very similar to CSS. However, LESS allows the declaration and usage of variables:

@plainred: red;
@plainblue: blue;
.foo {
color: @plainred;
.bar {
background-color: @plainblue;

To use these styles in a Solid component, import the .less file:

import "./styles.less";
function Component() {
return (
<div class="foo bar">Hello, world!</div>

By changing the file extension of the imported styles to .less, Vite will recognize it as a LESS file and compile it to CSS on demand.

Report an issue with this page