Installation
npm install px2rem-webpack-plugin --save-dev
Usage
The plugin should be used with html-webpack-plugin
var HtmlWebpackPlugin = ;var Px2remWebpackPlugin = ;var webpackConfig =entry: 'app.js'output:path: 'dist'filename: '[hash].app.js'plugins:originScreenWidth: 750 maxWidth: 750;
This will generate a file dist/index.html containing the following:
Webpack App
And translate the px
to rem
in all css files, before webpack css-loader handle the css source.
The plugin can also be used together with sass-loader, less-loader or stylus-loader.
It will auto handle properly aftersass/less/stylus
compilation but before thecss-loader
Note: css files in
node_modules
will not be translated.
For example the css below
will be automatically compiled to
Contribution Guide
# dev pluginmake dev ## in one bashmake debug ## in another bash# build for publishmake build# run testsmake test