postcss-pxtorem指定文件不做转化

`postcss-pxtorem` 是一个 PostCSS 插件，用于将设计稿中的像素单位（如 `px`）转换成相对单位（如 `rem`），以便于响应式设计。如果你不想对某个特定的文件内的像素值进行转换，你可以通过配置插件来实现：

1. 配置文件 (`postcss.config.js`) 或者直接在 CSS 文件的头部使用 `@import` 和 `@charset` 注释：

// postcss.config.js
module.exports = {
  plugins: {
    pxtorem: {
      rootValue: 16, // 设定根元素的 font-size，默认是10px
      exclude: /path/to/excluded/file\.css/, // 匹配不处理的文件路径
      propList: ['*'], // 只对某些属性进行转换，可以设置为['width', 'height']等
    },
  },
};

或者在 CSS 文件顶部添加注释：

/* @custom-media (prefers-reduced-motion: reduce) { ... */
/* 这些规则不会经过 px-to-rem 转换 */
body {
  /* 不处理 body 元素的 px 值 */
  width: 800px;
}

相关问题

vue 安装了postcss-loader 并配置了 postcss-pxtorem ，然后删除了postcss-loader和postcss-pxtorem,项目再启动会报错Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'

如果你在安装了 `postcss-loader` 和 `postcss-pxtorem` 后又删除了它们，再次启动项目时会出现 "Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'" 的错误信息。

这是因为在你的项目中仍然存在配置文件或依赖项引用了 `postcss-pxtorem` 插件，但是你已经将该插件从项目中删除了。

你需要做以下两件事情来解决这个问题：

1. 在你的项目中搜索 `postcss-pxtorem`，找到并删除所有使用该插件的配置文件或依赖项。例如，在 webpack 配置文件中删除 `postcss-pxtorem` 插件的配置。

2. 在项目根目录下执行以下命令，清除缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules
npm install

这样就可以解决这个问题了。

postcss-pxtorem指定文件

postcss-pxtorem是一个PostCSS插件，用于将像素单位（px）转换为rem单位。它可以帮助开发人员在移动端开发中更方便地处理响应式布局。要指定要使用postcss-pxtorem插件的文件，你需要在PostCSS配置文件中进行相应的设置。

以下是一个示例的PostCSS配置文件（postcss.config.js）：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 40, // 1rem的值，例如1rem == 40px
      propList: ['*'], // 需要转换的属性，默认为['*']，表示所有属性都会被转换
    }),
  ],
};

在上述配置中，我们将rootValue设置为40，表示1rem等于40px。propList设置为['*']，表示所有属性都会被转换为rem单位。

然后，你可以在命令行中使用postcss命令来处理指定的文件，例如：

postcss input.css -o output.css

上述命令将会将input.css文件中的px单位转换为rem单位，并将结果输出到output.css文件中。

请注意，你需要先安装postcss和postcss-pxtorem插件，可以使用以下命令进行安装：

npm install postcss postcss-pxtorem