postcss-pxtorem 无法修改js设置的值

PostCSS-pxtorem无法修改JavaScript设置的值，因为它是一种CSS预处理器，只能处理CSS文件中的像素单位。如果想在JavaScript中设置不同的值，可以尝试使用CSS变量或CSS-in-JS的解决方案，比如styled-components或Emotion。这些库可以在CSS中使用JavaScript变量，并且可以在JS中动态更改这些变量的值。

相关问题

vue3 postcss-pxtorem

对于Vue 3中使用postcss-pxtorem，你可以按照以下步骤进行配置：

1. 首先，确保你的项目已经安装了postcss和postcss-pxtorem插件。你可以使用以下命令安装它们：

   npm install postcss postcss-pxtorem --save-dev

2. 创建一个postcss配置文件，在项目的根目录下创建一个名为postcss.config.js的文件。

3. 在postcss.config.js文件中，配置postcss-pxtorem插件。你可以使用如下代码：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 16, // 设计稿宽度的 1/10
         propList: ['*'], // 需要转换的属性，这里表示所有属性都需要转换
         selectorBlackList: [] // 需要忽略转换的选择器，可以使用正则
       }
     }
   }

4. 在Vue项目的根目录下找到vue.config.js文件（如果没有则创建一个），并在文件中添加以下代码：

   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           config: {
             path: './postcss.config.js'
           }
         }
       }
     }
   }

5. 现在，你可以在Vue组件中直接使用px单位，插件会自动将其转换为rem单位。

注意：根据你的设计稿宽度和需求，你可能需要调整postcss-pxtorem插件的配置。请根据实际情况修改rootValue和其他选项的值。

希望这能帮助到你！如果还有其他问题，请随时提问。

vite 使用postcss-pxtorem

在 Vite 中使用 postcss-pxtorem 插件可以将 CSS 文件中的像素单位（px）转换为 rem 单位。这样做的好处是可以方便地适配不同的屏幕尺寸。

以下是在 Vite 中使用 postcss-pxtorem 的步骤：

1. 首先，确保你的项目已经安装了 postcss 和 postcss-pxtorem 插件。你可以使用以下命令进行安装：

   npm install postcss postcss-pxtorem --save-dev

2. 在项目根目录下创建一个 postcss.config.js 文件，并添加以下内容：

   module.exports = {
     plugins: [
       require('postcss-pxtorem')({
         rootValue: 16, // 屏幕宽度基准值，比如设计稿是以 375px 宽度为基准，设置为 16 则表示 1rem = 16px
         propList: ['*'], // 需要转换的 CSS 属性，* 表示所有
         selectorBlackList: [], // 需要忽略的 CSS 选择器，比如 '.ignore' 表示不转换 .ignore 类下的样式
         minPixelValue: 2 // 小于该值的像素单位不进行转换
       })
     ]
   };

3. 在 Vite 的配置文件 vite.config.js 中添加 postcss 插件配置。假设你已经有一个名为 `vue.config.js` 的配置文件，你可以修改它如下：

   import { defineConfig } from 'vite';

   export default defineConfig({
     // 其他配置项...
     css: {
       postcss: {
         plugins: [
           require('postcss')
         ]
       }
     }
   });

或者，如果你使用的是 Vite 1.x 版本，可以修改为：

   module.exports = {
     // 其他配置项...
     css: {
       postcss: {
         plugins: [
           require('postcss')
         ]
       }
     }
   };

4. 现在你可以在 CSS 文件中使用像素单位了，它们会自动被转换为 rem 单位。例如：

   .container {
     width: 375px;
     font-size: 16px;
     padding: 10px 20px;
   }

经过 postcss-pxtorem 插件的转换后，会变成：

   .container {
     width: 23.4375rem;
     font-size: 1rem;
     padding: 0.625rem 1.25rem;
   }

这样，你就成功地在 Vite 中使用了 postcss-pxtorem 插件来进行像素单位转换了。希望对你有所帮助！如果还有其他问题，请随时提问。