Interpolate-html-css-modules Webpack Plugin
Webpack plugin that interpolates Handlebars HTML markup with CSS modules.
Install
npm i --save-dev interpolate-html-css-modules-webpack-plugin
API
// webpack.config.js// require pluginvar InterpolateHtmlCssPlugin = ; // add to list of plugins'output_template' 'entree_point' options : compact : true // boolean :: trim whitespace and \n\r in the output_template delimiters : "<%=" "%>" // array :: pass your custom delimiters pattern to substitute default "{{ }}", for example <%= data %>) template: ejs // optional template to wrap output_data module_export : true // boolean :: will output template as npm module, i.e. wrapped into ' module.exports = " template_contents " ',
Usage
app.scss
component.css
my_component.js
;; // import template in raw text format by using raw!// you can also use a loader in webpack.config.js in that case '!raw' prefix would not be needed here; /* * Important : * Export class with 'render' method that returns * style references * 'render' will be used in plugin internally to pass styles data for interpolation*/ { return styles : app : appStyle style : componentStyle template : template ; } ;
template
Template to compile
<div class="{{app.app-container}}"> <div class="{{style.root}} more-class-names-here"> <p class="{{style.text}}">MyComponent styled with appscss and componentcss</p> </div></div>
result output
MyComponent styled with app.scss and component.css
result style.css
/*# sourceMappingURL=style.css.map*/
webpack config example
webpack.config.js
var webpack = ;var ExtractTextPlugin = ;var InterpolateHtmlCssPlugin = ; var path = ;var ejs = ;var fs = ; var sassParams = 'outputStyle=expanded' 'sourceMap' 'sourceMapContents=true'; var cssLoader = ExtractTextPlugin; moduleexports = //entry: './src/index.js', entry : file_entree : "./src/components/my_component/my_component.js" output: filename: 'index.js' path: path libraryTarget: 'umd' devtool: "source-map" // devtool: "inline-source-map", node: fs: "empty" // avoids error messages module: loaders: test: /$/ loader: cssLoader test: /\.js$/ loader: 'babel-loader' exclude: /node_modules/ postcss: resolve: modulesDirectories: 'node_modules' 'components' plugins: 'style.css' allChunks: true 'index.html' 'file_entree' template: ejs ;