https://github.com/ls-age/svelte-preprocess-less

Svelte preprocessor for less
https://github.com/ls-age/svelte-preprocess-less

Last synced: about 2 months ago
JSON representation

Svelte preprocessor for less

• Host: GitHub
• URL: https://github.com/ls-age/svelte-preprocess-less
• Owner: ls-age
• Created: 2017-12-31T09:38:16.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-18T07:35:52.000Z (over 1 year ago)
• Last Synced: 2024-07-07T15:22:12.837Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 401 KB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-svelte - svelte-preprocess-less - Preprocessor for less. (Integrations / Preprocessing)

README

        
# svelte-preprocess-less

[![CircleCI](https://circleci.com/gh/ls-age/svelte-preprocess-less.svg?style=svg)](https://circleci.com/gh/ls-age/svelte-preprocess-less)

[![codecov](https://codecov.io/gh/ls-age/svelte-preprocess-less/branch/master/graph/badge.svg)](https://codecov.io/gh/ls-age/svelte-preprocess-less)

> Svelte preprocessor for [less](http://lesscss.org)

## Installation

```bash

npm install --save-dev svelte-preprocess-less less

```

## Usage

**Using rollup-plugin-svelte**

```javascript

// rollup.config.js

import svelte from 'rollup-plugin-svelte';

import { less } from 'svelte-preprocess-less';

...

export default {

  ...

  plugins: [

    ...

    svelte({

      preprocess: {

        style: less(),

      },

    }),

  ],

};

```

Now all `` elements in your components that have a `type="text/less"` or `lang="less"` attribute will be preprocessed by less.

### Passing options to less

The `less` function passes the first argument to the less compiler, e.g.:

```javascript

...

less({

  plugins: [

    ...

  ]

})

```

### Filtering styles

The `less` function passes the second argument to [svelte-preprocess-filter](https://github.com/ls-age/svelte-preprocess-filter), e.g.:

```javascript

...

less(

  {} // Empty less options

  { all: true } // Preprocess all styles

)

```

For available options visit [the less documentation](http://lesscss.org/usage/#programmatic-usage).