Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

output.convertToRem

  • Type: boolean | object
  • Default: false

By setting output.convertToRem, Modern.js can do the following things:

  • Convert px to rem in CSS.
  • Insert runtime code into the HTML template to set the fontSize of the root element.

Boolean Type

If output.convertToRem is set to true, Rem processing capability will be turned on.

export default {
  output: {
    convertToRem: true,
  },
};

At this point, the rem configuration defaults as follows:

{
  enableRuntime: true,
  rootFontSize: 50,
  screenWidth: 375,
  rootFontSize: 50,
  maxRootFontSize: 64,
  widthQueryKey: '',
  excludeEntries: [],
  supportLandscape: false,
  useRootFontSizeBeyondMax: false,
  pxtorem: {
    rootValue: 50,
    unitPrecision: 5,
    propList: ['*'],
  }
}

Object Type

When the value of output.convertToRem is object type, Modern.js will perform Rem processing based on the current configuration.

options:

NameTypeDefaultDescription
enableRuntimebooleantrueWhether to generate runtime code to calculate and set the font size of the root element
inlineRuntimebooleantrueWhether to inline the runtime code to HTML. If set to false, the runtime code will be extracted into a separate convert-rem.[version].js file and output to the dist directory
rootFontSizenumber50The root element font size
maxRootFontSizenumber64The root element max font size
widthQueryKeystring'' Get clientWidth from the url query based on widthQueryKey
screenWidthnumber375The screen width for UI design drawings (Usually, fontSize = (clientWidth * rootFontSize) / screenWidth)
excludeEntriesstring[][]To exclude some page entries from injecting runtime code, it is usually used with pxtorem.exclude
supportLandscapebooleanfalseUse height to calculate rem in landscape
useRootFontSizeBeyondMaxbooleanfalseWhether to use rootFontSize when large than maxRootFontSize
pxtoremobject
  • rootValue (Default is the same as rootFontSize)
  • unitPrecision: 5
  • propList: ['*']
postcss-pxtorem options

Example

export default {
  output: {
    convertToRem: {
      rootFontSize: 30,
      excludeEntries: ['404', 'page2'],
      pxtorem: {
        propList: ['font-size'],
      },
    },
  },
};

For detailed usage, please refer to rsbuild-plugin-rem.