preface

Try using postcss-px-to-viewport adaptive layout in React. Use react-scripts eject to modify webpack.config.js or install a bunch of dependencies. It turns out not to work.

The default postcss for the react scaffold is 8.x. I have installed “postCSS “: NPM postcss-px-to-viewPort is not compatible with github postcss-px-to-viewport. Install postcss-px-to-viewport-with-include (postcss-px-to-viewport-with-include); Find problems, be sure to look at issues, may have a miracle effect.

The body of the

Js style introduce require(‘postcss-px-to-viewport-with-include’) and fill in the configuration.

style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer')(overrideBrowserslist=['last 20 versions'.'android > = 4.0'.'iOS >= 7']),
        require('postcss-px-to-viewport-with-include')( {
          unitToConvert: 'px'.// The unit to convert
          viewportWidth: 375.// Width of UI design draft
          viewportHeight: 667.// UI
          unitPrecision: 6.// The precision of the conversion, i.e. the number of decimal places
          // propList: When we do not want to convert some units of property, we can add them to the end of the array and add them to the front! For example, propList: ["*","! Letter-spacing "], which means that all CSS properties are converted to property units, except for letter-spacing
          propList: [The '*'].// Specify the unit of the CSS property to be converted. * indicates that all CSS properties are converted
          viewportUnit: 'vw'.// Specify the window unit to convert to, default vw
          fontViewportUnit: 'vw'.// Specify the window unit to convert the font to, default vw
          // Transform the blacklist, inside the blacklist we can write string, as long as the class name contains this string, will not be matched. For example, selectorBlackList: ['wrap'], which indicates that units with class names such as wrap,my-wrap,wrapper, etc. will not be converted
          selectorBlackList: ['ignore'].// Specify the class name that is not converted to window units,
          minPixelValue: 1.// The default value is 1, and the conversion is not performed if the value is less than or equal to 1px
          mediaQuery: true.// Whether the media query is also converted in the CSS code, the default is false
          replace: true.// Whether to replace the attribute value directly after conversion
          exclude: [/node_modules/].// Sets the file to be ignored and the re to match the directory name
          // include: [/node_modules/],
          landscape: false.// Whether to handle landscape})],}},Copy the code

Pit point

It has been tested for a long time, but I always thought there was a problem with the exclude configuration (there may be a problem with my config configuration, but this configuration is ok in the Vue project, there are understand big guy, please advise, whoo-whoo-whoo-whoo-whoo-wow).

const path = require('path')
module.exports=({file}) = >{
  return {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      'postcss-px-to-viewport': {
        unitToConvert: 'px'.// The unit to convert
        viewportWidth: 375.// Width of UI design draft
        viewportHeight: 667.// UI
        unitPrecision: 6.// The precision of the conversion, i.e. the number of decimal places
        // propList: When we do not want to convert some units of property, we can add them to the end of the array and add them to the front! For example, propList: ["*","! Letter-spacing "], which means that all CSS properties are converted to property units, except for letter-spacing
        propList: [The '*'].// Specify the unit of the CSS property to be converted. * indicates that all CSS properties are converted
        viewportUnit: 'vw'.// Specify the window unit to convert to, default vw
        fontViewportUnit: 'vw'.// Specify the window unit to convert the font to, default vw
        // Transform the blacklist, inside the blacklist we can write string, as long as the class name contains this string, will not be matched. For example, selectorBlackList: ['wrap'], which indicates that units with class names such as wrap,my-wrap,wrapper, etc. will not be converted
        selectorBlackList: ['ignore'].// Specify the class name that is not converted to window units,
        minPixelValue: 1.// The default value is 1, and the conversion is not performed if the value is less than or equal to 1px
        mediaQuery: true.// Whether the media query is also converted in the CSS code, the default is false
        replace: true.// Whether to replace the attribute value directly after conversion
        exclude: [/node_modules/].// Sets the file to be ignored and the re to match the directory name
        landscape: false.// Whether to handle landscape}},}}Copy the code

reference

@is_to@craco /craco postcss-px-to-viewport postcss-px-to-viewport-with-include