vue@cli4 和 webpack5【实现自适应px-rem转化】

使用webpack5打包时候【打包后的css转化为rem】适配配置：

 步骤1：安装4个插件

    postcss\": \"^8.4.14\",

    \"postcss-loader\": \"^3.0.0\",

    \"postcss-preset-env\": \"^7.6.0\",

    \"px2rem-loader\": \"^0.1.9\",

npm install --save postcss postcss-loader postcss-preset-env px2rem-loader

步骤2：配置webpac.base.config.js

      {
        test: /\\.css|less$/,
        use : [
          MiniCssExtractPlugin.loader,
          // {loader:\'style-loader\'},
          {loader:\'css-loader\'},
          {// 兼容css, autoprefixer为css3属性添加前缀，-webkt-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
            // postcss-loader postcss-preset-env：，不写任何值，默认兼容所有浏览器
            loader:\"postcss-loader\",
            options:{
                postcssOptions:{
                    ident: \"postcss\",
                    plugins:[
                      // require(\'autoprefixer\')
                      require(\"postcss-preset-env\")()
                    ]
                }
            }
          },
          {
            loader: \'px2rem-loader\',
            options: {
              remUnit: 192, // 1rem = 192px
              remPrecision: 8 // px 转换为 rem 时小数点后的位数
            }
          },
          {loader:\'less-loader\'},
          // {loader:\'postcss-loader\'}
        ]
      },
      {
        test: /\\.styl(us)?$/,
        use: [\'style-loader\', \'css-loader\', \'postcss-loader\', \'stylus-loader\'],
      },

步骤3：在根目录public/index.html 中加入，根据窗口的大小给html设置等比的字体大小【 配置可伸缩布局方案】

方式1： 直接引入

       1、直接引入

        2： 在public/index.html中引入

方式2： 直接用script标签写入