Skip to content

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

License

Notifications You must be signed in to change notification settings

nutboltu/postcss-wrapper-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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')
  ]

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published