自定义postcss插件，根据倍率增大font-size大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了自定义postcss插件，根据倍率增大font-size大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用侧

    loaderOptions: {
      /**自适应配置 */
      postcss: {
        plugins: [
          // postcss
          require("./index.js")({
            unit: 1.2,
          }),
        ],
      },
    }

定义侧文章来源地址https://www.toymoban.com/news/detail-835513.html


const postcss = require('postcss')

module.exports = postcss.plugin('postcss-change-css-fontSize', function (opts = {}) {
  const { unit = 1 } = opts || {}
  console.log(99999)
  console.log(unit)
  // 接收两个参数，第一个是每个css文件的ast，第二个参数中可获取转换结果相关信息(包括当前css文件相关信息)
  function plugin(css, result) {
    css.walkRules((rule) => {
      // 遍历当前ast所有rule节点
      const { nodes } = rule
      for (let index = 0; index < nodes.length; index++) {
        const element = nodes[index];
        let elementprop = element.prop + ''
        if (elementprop && typeof elementprop === "string" && elementprop.includes('font-size')) {
          element.value = element.value.replace('px','') * unit + 'px'
         // const clone = rule.clone()
          // clone.selector = replaceStr(selector, prefix, replace)
          //rule.replaceWith(clone)
        }
      }
    })
  }

  return plugin
})

// module.exports = (opts = {}) => {
//   return {
//     postcssPlugin: 'postcss-dark-theme-class', // 插件名
//     // Once (root, { result }) { // root为根节点树，Once方法会在该节点下的所有子元素被处理之前调用
//     //    root.walkDecls(decl=>{...}) // 遍历CSS声明
//     // }
//   }
// }
// module.exports.postcss = true // 声明导出为postcss插件

// const Options = {
//   viewportWidth: 375,//默认视口宽度
// }


// module.exports = (options) =>{
//   const opt = Object.assign({},Options,options);
//   return {
//     postcssPlugin: 'postcss-change-css-fontSize',
//     //钩子函数
//     Declaration(node){
//       debugger
//       console.log(node)
//       //判断需要转换的单位
//       if(node.value.indexOf('xm') != -1){
//         console.log(node.prop,node.value);
//         const num = parseFloat(node.value);
//         node.value = `${((num / opt.viewportWidth)*100).toFixed(2)}vw`
//       }
      
//     }
//   }
// }

// module.exports.postcss = true // 声明导出为postcss插件