美文网首页
调试适合的postcssrc配置

调试适合的postcssrc配置

作者: 爱代码的派派星 | 来源:发表于2021-12-25 22:13 被阅读0次
    module.exports = {
        plugins: {
          'autoprefixer': {
            overrideBrowserslist: ['> 0.15% in CN']
          },
          'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
          }
        }
      }
    

    记得安装postcss

    "postcss": "^8.3.5",
    "postcss-pxtorem": "^5.1.1",
    "lib-flexible": "^0.3.2",
    
    main.js引入
    import 'lib-flexible'
    
    更新更详细的vite的postcss.config.js配置
    module.exports = {
      'plugins': {
        'autoprefixer': {
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'not ie <= 11',  //不考虑IE浏览器
            'ff >= 30', //仅新版本用“ff>=30
            '> 1%',//  全球统计有超过1%的使用率使用“>1%”;
            'last 2 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true ,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid,可以关闭开启)
        },
        'postcss-pxtorem': {
          rootValue: 37.5, //75表示750设计稿,37.5表示375设计稿e
          unitPrecision: 6, // 计算结果保留 6 位小数
          selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
          propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
          replace: true, // 转换成 rem 以后,不保留原来的 px 单位属性
          mediaQuery: true, // 允许在媒体查询中转换px。
          minPixelValue: 2, // 设置要替换的最小像素值。
          exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
        }
      }
    }
    

    相关文章

      网友评论

          本文标题:调试适合的postcssrc配置

          本文链接:https://www.haomeiwen.com/subject/hrjjqrtx.html