Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

some errors when px converts to rem #87

Open
spring011 opened this issue Sep 2, 2022 · 10 comments
Open

some errors when px converts to rem #87

spring011 opened this issue Sep 2, 2022 · 10 comments

Comments

@spring011
Copy link

spring011 commented Sep 2, 2022

Configure rootValue by function, There are some errors that px converts to rem.
I use development environment:postcss-pxtotem v6.0.0, vite2.0+, vue3. At the same time,I use vue3 component library vant3.0+。to match the Vant style,I do as follow in file postcss.config.js:

const path = require('path');
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('node_modules' + path.sep + 'vant') !== -1 ? 37.5 : 75;
      },
      // rootValue: 75,
      propList: ['*'],
      selectBlackList: ['.norem'],
    },
  },
};

Access the page in the browser,that is no problem. As shown in the figure below,browser got a index.6f88061b.css file that dose not refer to Vant component library。index.6f88061b.css file is about page logic and when make px converts to rem in this file the calculator uses rootValue 75. example, height of .top_tile class is 2.8rem.Everything is all right.
ok

however, somtimes there are some errors when I access page browser.The page content becomes larger resulting in out-of-browser size.and browser got another css file named index.82969300.css not index.6f88061b.css. height of .top_tile class becomes twice the height.now the height is 5.6rem.
error

@yuningjiang123
Copy link

Maybe you could add 'console.log(file)' inside the rootValue function to see the file path when error occurs ~

@spring011
Copy link
Author

Maybe you could add 'console.log(file)' inside the rootValue function to see the file path when error occurs ~

when use console.log, the print is no problem.

@hemengke1997
Copy link

@1007875327
Copy link

I have the same problem. Have you solved it now?

@hemengke1997
Copy link

I have the same problem. Have you solved it now?

I did

@1007875327
Copy link

I solved this problem by reducing the version to 5.1.1

@jiadesen
Copy link

@hemengke1997 具体是什么原因导致的这个问题呢?

@hemengke1997
Copy link

@hemengke1997 具体是什么原因导致的这个问题呢?

这个库的hook调用有点儿问题,你可以试试我fork的库:https://github.com/hemengke1997/postcss-pxtorem

@mayuxian
Copy link

mayuxian commented Mar 2, 2023

You can just downgrade to v5.1.1 and it'll be fine

@chenxch
Copy link

chenxch commented Aug 25, 2023

My scenario is converting px to rem, and sometimes it will be converted to rem under v6.0.0, and sometimes px will not be converted. Currently, the conversion output of v5.1.1 is very stable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants