Skip to content

Generate a wrapped classname for less files automatically.

License

Notifications You must be signed in to change notification settings

clownvary/less-wrapper-loader

Repository files navigation

less-wrapper-loader

npm Build Status codecov

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'
          }
        }
      ]
      },
    ],
  },
};
  1. add a classname samed with your less-wrapper-loader namespace in root container component
render() {
    return (
      <div className="wrapper">
        ...
      </div>
}
  1. 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