https://github.com/nutboltu/postcss-wrapper-loader

This plugin wraps all the cssClasses in a css file with a prefix class while webpack bundled. It helps to scope a specific css file with a prefix class
https://github.com/nutboltu/postcss-wrapper-loader

css-wrapper postcss-loader postcss-wrapper-loader webpack-loader

Last synced: about 1 month ago
JSON representation

This plugin wraps all the cssClasses in a css file with a prefix class while webpack bundled. It helps to scope a specific css file with a prefix class

• Host: GitHub
• URL: https://github.com/nutboltu/postcss-wrapper-loader
• Owner: nutboltu
• License: mit
• Created: 2017-05-30T13:46:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-05-07T21:32:21.000Z (over 3 years ago)
• Last Synced: 2024-09-20T00:41:55.375Z (about 2 months ago)
• Topics: css-wrapper, postcss-loader, postcss-wrapper-loader, webpack-loader
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 2
• Watchers: 2
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## PostCss Wrapper Loader for Webpack

### Example

This plugin wraps all the cssClasses in a css file with a prefix class while webpack bundled. It helps to scope a specific css file with a prefix class

Consider a simple css file `styles.css`:

```

.css-class1 {height: auto;}.css-class2 {width: auto;}

```

After the postcss-wrapper-loader the file will be following

```

.wrapper .css-class1 {height: auto;} .wrapper .css-class2 {width: auto;}

```

### How it works

In the webpack config file initialize the loader

```

const PostCssWrapper = require('postcss-wrapper-loader');

```

add this plugin in webpack plugins

```

  plugins: [

    new ExtractTextWebpackPlugin('styles.css'),

    new PostCssWrapper('styles.css', '.wrapper')

  ]

```