less-modify-var-loader

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

@width: 100px;
@height: 100px;
@color: blue;

• style.less

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

body {
  width: @width;
  height: @height;
  color: @color;
}

• _replace.less

@color: red;

• Output

body {
  width: 100px;
  height: 100px;
  color: red;
}

Installation

npm install less-modify-var-loader -D
# or use yarn
yarn add less-modify-var-loader --dev

Usage

// ...
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, [email protected].

License

MIT - imcuttle 🐟