当前位置：首页 > article >正文

【插件】安装插件 postcss-pxtorem 转换样式单位 px 为 rem

article 2024/11/16 3:31:35

安装插件 postcss-pxtorem 转换样式单位 px 为 rem

安装 postcss-pxtorem
npm install postcss-pxtorem@5.1.1
添加配置文件 postcss.config.js 或者在 vue.config.js 中对css 进行配置

配置1 - 添加配置文件 `postcss.config.js` （我的项目中配置文件无效）

postcss.config.js

要安装 autoprefixer

const isPxToRem = process.argv.slice(2).find(item => item === '--pxtorem') // 需要在 package.json 中配置 运行serve/打包build 项目代码  --pxtorem（如下图）

module.exports = {
  plugins: [
    require('autoprefixer'),
    isPxToRem ? require('postcss-pxtorem')({
      'rootValue': 16,
      'unitPrecision': 5,
      'propList': [
        '*',
        '!box-shadow'
      ],
      'replace': true,
      'mediaQuery': false,
      'minPixelValue': 3,
      exclude: /node_modules/i
    }) : ''
  ]
}

在这里插入图片描述

配置2 - `vue.config.js` 中对css 进行配置（可以用）

vue.config.js 中【主要代码】

const fs = require('fs')
const webpack = require('webpack')
const path = require('path')

const APP_Version = 'V1.0.1'
const Timestamp = new Date().getTime() //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
module.exports = {
  // 基本路径
  publicPath: './',
  // publicPath: '/',
  // 输出文件目录
  outputDir: 'superviseAppWeb',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  // assetsDir: '',

  //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
  runtimeCompiler: true,

  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
  transpileDependencies: [],

  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // webpack配置
  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: (config) => {
    // 添加file-loader排除规则
    // config.module
    //     .rule('exclude')
    //     .test(/\.(svg|woff|woff2|ttf|tof|eot)$/)
    //     .use('file-loader')
    //     .loader('file-loader')
    //     .options({
    //       name: 'img/[name].[hash:8].[ext]'
    //     })
    //     .end()
    config.plugins.delete('case-sensitive-paths')
  },
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          BUILD_LOCAL: JSON.stringify(process.env.BUILD_LOCAL)
        }
      })
      // new webpack.ProvidePlugin({
      //     $: "jquery",
      //     jQuery: "jquery",
      //     "windows.jQuery": "jquery"
      // })
    ],
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `[name].${APP_Version}.${Timestamp}.js`,
      chunkFilename: `[name].${APP_Version}.${Timestamp}.js`
    },
    /**** @supermap/iclient-leaflet 依赖打包配置（npm安装依赖） start ****/
    module: {
      rules: [
        // {
        //   test: /\.(mov)$/,
        //   use: {
        //     loader: 'file-loader',
        //     options: {
        //       name: '[name].[ext]'
        //     },
        //   }
        // },
        {
          // 使用babel-loader将ES6语法转换为ES5
          test: /\.js$/,
          include: [
            path.resolve(__dirname, 'node_modules/@supermap/iclient-common'),
            path.resolve(__dirname, 'node_modules/@supermap/iclient-leaflet'),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, 'node_modules/elasticsearch')
          ],
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  absoluteRuntime: false,
                  corejs: false,
                  helpers: false,
                  regenerator: true,
                  useESModules: false
                }
              ]
            ]
          }
        }
      ]
    }
    /**** @supermap/iclient-leaflet 依赖打包配置（npm安装依赖） end ****/
  },
  // vue-loader 配置项

  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/styles/variables.scss', 'utf-8')
      },
      postcss: { /* 【主要代码】 */
        plugins: [
          require('postcss-pxtorem')({
            // 把px单位换算成rem单位
            rootValue: 16, //换算基数，
            unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*', '!box-shadow'],
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值
            replace: true,
          })
        ]
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require('os').cpus().length > 1,

  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, // 自动打开浏览器
    proxy: {
      '/etm/': {
        target: 'http://192.168.31.125:8094/etm/', // 缉查布控地图服务
        changeOrigin: true,
        pathRewrite: { '^/etm/': '' }
      },
      // '/coresupervise/': {
      //   target: 'http://192.168.11.63:9145/coresupervise/', // 施逸峰
      //   changeOrigin: true,
      //   pathRewrite: { '^/coresupervise/': '' }
      // },
      '/': {
        ws: false, // proxy websockets
        // target: 'http://192.168.0.26:9000',
        target: 'http://192.168.0.47:9000', // 公司47环境
        // target: 'http://192.168.10.8:9181', // 罗成文
        // target: 'http://192.168.11.209:9381', // 郑胡训
        // target: 'http://192.168.11.139:9181', // 何斌
        // target: 'http://192.168.0.135:8000', //江宇

        // target: 'http://192.168.0.42:9999', // 获取token
        // target: 'http://192.168.0.42:9181',

        // target: 'http://192.168.20.37:9181',
        pathRewrite: { '^/': '' },
        changeOrigin: true,
        secure: false
      },
      '/redirect': {
        target: 'http://192.168.0.47:9000',
        pathRewrite: { '^/redirect': '' }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}