less-wrapper-loader

Generate a wrapped classname for less files automatically. It's a easy way to resolve style conflicts.

example

Before :

.name {
  color: red
}

.age {
  color: blue;
}

After :

.wrapper .name {
  color: red
}

.wrapper .age {
  color: blue;
}

Getting Started

To begin, you'll need to install less-wrapper-loader:

npm install --save-dev less-wrapper-loader

1. add loader in webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
        ...
        'less-loader',
        {
          // must be placed before less-loader
          loader: 'less-wrapper-loader',
          options: {
            nameSpace: 'wrapper'
          }
        }
      ]
      },
    ],
  },
};

2. add a classname samed with your less-wrapper-loader namespace in root container component

render() {
    return (
      <div className="wrapper">
        ...
      </div>
}

3. run webpack, all less files you used will be wrapped a classname wrapper

Options

Name	Type	Default	Description
nameSpace	{string} or {regex}	/less/g	string: value will as a namespace wrapped in less file regex: value will test less file path and return matched result as namespace wrapped in less file
whitePathList	{array[string]}	[]	just wrap less  file which it's path contains one of the white list value default value will wrap all less files