https://github.com/imcuttle/less-modify-var-loader

The webpack loader for better replace less variables
https://github.com/imcuttle/less-modify-var-loader

Last synced: 5 months ago
JSON representation

The webpack loader for better replace less variables

• Host: GitHub
• URL: https://github.com/imcuttle/less-modify-var-loader
• Owner: imcuttle
• License: mit
• Created: 2019-02-08T06:04:09.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:12:18.000Z (over 3 years ago)
• Last Synced: 2025-09-07T18:54:10.914Z (9 months ago)
• Language: JavaScript
• Size: 780 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: License

Awesome Lists containing this project

README

          
# less-modify-var-loader

[![Build status](https://img.shields.io/travis/imcuttle/less-modify-var-loader/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/less-modify-var-loader)

[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/less-modify-var-loader.svg?style=flat-square)](https://codecov.io/github/imcuttle/less-modify-var-loader?branch=master)

[![NPM version](https://img.shields.io/npm/v/less-modify-var-loader.svg?style=flat-square)](https://www.npmjs.com/package/less-modify-var-loader)

[![NPM Downloads](https://img.shields.io/npm/dm/less-modify-var-loader.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/less-modify-var-loader)

[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)

> The webpack loader for better replace less variables.

## Why need it?

We could use `modifyVars` option in `less-loader` for overriding less variables, but it is not friendly for developer (hot updating).

- `vars.less`

```less

@width: 100px;

@height: 100px;

@color: blue;

```

- `style.less`

```less

@import (reference) './vars.less';

body {

  width: @width;

  height: @height;

  color: @color;

}

```

- `_replace.less`

```less

@color: red;

```

- **Output**

```

body {

  width: 100px;

  height: 100px;

  color: red;

}

```

## Installation

```bash

npm install less-modify-var-loader -D

# or use yarn

yarn add less-modify-var-loader --dev

```

## Usage

```javascript

// ...

module: {

  rules: [

    {

      test: /\.less$/,

      use: [

        'style-loader',

        'css-loader',

        {

          loader: 'less-loader'

        },

        {

          loader: 'less-modify-var-loader'

        }

      ]

    }

  ]

}

```

### Options

#### `filePath`

The path of overriding less file, it could be inferred as the closest file from less file, or assigning special file path by absolute path.

- **Type**: `string`

- **Default**: `_replace.less`

## Contributing

- Fork it!

- Create your new branch:  

  `git checkout -b feature-new` or `git checkout -b fix-which-bug`

- Start your magic work now

- Make sure npm test passes

- Commit your changes:  

  `git commit -am 'feat: some description (close #123)'` or `git commit -am 'fix: some description (fix #123)'`

- Push to the branch: `git push`

- Submit a pull request :)

## Authors

This library is written and maintained by imcuttle, moyuyc95@gmail.com.

## License

MIT - [imcuttle](https://github.com/imcuttle) 🐟