postcss-pxtorem icon indicating copy to clipboard operation
postcss-pxtorem copied to clipboard

how to use it in rollup , with antd / antd-mobile integrated ?

Open Kilims opened this issue 4 years ago • 2 comments

by using this plugin , with webpack + antd/antd-mobile, my webpack.config.js will be :

require("postcss-pxtorem")({ rootValue: 37.5, propList: ["*"], minPixelValue: 2, selectorBlackList: [] }),

which works well

by how to use this plugin by using rollup ?

Kilims avatar Sep 17 '21 05:09 Kilims

I use like bellow in rollup.config.js

var pxtorem = require("postcss-pxtorem"); 
import postcss from "rollup-plugin-postcss";

export default {
    input: "src/index.ts",
    output: {
        dir: "build",
        format: "es",
        sourcemap: true,
        preserveModules: true,
        preserveModulesRoot: "src",
    },
    plugins: [
        postcss({
            minimize: true,
            plugins: [
                pxtorem({
                    rootValue: 16,
                    unitPrecision: 6,
                    propList: ["*"],
                }),
            ]
        })
    ]
};

mehimanshupatil avatar Mar 16 '22 09:03 mehimanshupatil

I have met the same issue,My project has two sets of UIs, one is vant and another is element-plus,i want to make pxto rem in vant , then i try to set selectorBlackList: [ '.el-'] and don‘t set html fontsize to making px to rem invalid, However, this method does not work for CSS variables,So I put up an issue and I hope someone can help me answer it。

wmo123 avatar Feb 15 '23 10:02 wmo123