PostCSS plugin to convert rem values to px values.
.foo {
margin: 2rem;
}.foo {
margin: 32px;
}Step 1: Install plugin:
npm install --save-dev postcss @thedutchcoder/postcss-rem-to-pxStep 2: Check you project for an existing PostCSS config: postcss.config.js
in the project root, "postcss" section in package.json
or postcss in bundle config.
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Step 3: Add the plugin to plugins list:
module.exports = {
plugins: [
+ require('@thedutchcoder/postcss-rem-to-px'),
require('autoprefixer')
]
}You can set a baseValue to represent the body's root pixel value for font-size, which is the base for rem values. The default baseValue is 16.
module.exports = {
plugins: [
+ require('@thedutchcoder/postcss-rem-to-px', { baseValue: 10 }),
require('autoprefixer')
]
}