You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you're more into webpack then you don't need all these modules at all.
With css, style, and html loaders you can achieve the same result:
css-modules-webpack-example
Global file
Let's say we have cssClasses.json with all CSS modules inside:
varposthtml=require('posthtml');posthtml([require('posthtml-css-modules')('./cssClasses.json')]).process('<h1 css-module="title">My profile</h1>'+// You can also use nested modules'<div css-module="profile.user">John</div>').then(function(result){console.log(result.html);});// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>// <div class="_profile_user_f93j">John</div>
Directory with several files
CSS modules could be also separated into several files.
For example, profile.js and article.js inside directory cssModules/:
You can also pass CSS modules as an object to the plugin:
varposthtml=require('posthtml'),cssModules={title: "_title_116zl_1 _heading_9dkf",profile: {user: "_profile_user_f93j"}};posthtml([require('posthtml-css-modules')(cssModules)]).process('<h1 css-module="title">My profile</h1>'+// You can also use nested modules'<div css-module="profile.user">John</div>').then(function(result){console.log(result.html);});// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>// <div class="_profile_user_f93j">John</div>