#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:

#Example

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

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