postcss-pxtorem内联样式不生效

### 解决 PostCSS pxtorem 内联样式不生效的方法

PostCSS 插件 `postcss-pxtorem` 主要用于将像素单位自动转换为相对单位 rem，从而提高移动端项目的灵活性和响应能力[^4]。然而，在处理内联样式时可能会遇到一些挑战。

#### 1. 配置文件设置不当
如果配置文件未正确设置，则可能导致插件无法识别并转换内联样式的 px 值。确保在 postcss.config.js 中包含了对内联样式的支持：

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            propList: ['*'], // 转换所有属性中的px值
            selectorBlackList: [], // 黑名单列表，默认为空数组
            minPixelValue: 0,
            mediaQuery: false, // 不会转换媒体查询内的px
            replace: true, // 替换原px还是保留原来的px作为备份
            exclude: /node_modules/i, // 排除某些目录下的文件
            include: undefined, // 只针对特定路径下文件做转化
            rootValue: 16 // 设定html根元素字体大小
        })
    ]
};

#### 2. Webpack 或其他构建工具配置缺失
对于使用 Webpack 构建的应用程序来说，还需要确保 loader 正确加载了 PostCSS 处理器，并且能够作用于 JavaScript 文件内部定义的 CSS 样式对象上。可以在 webpack.config.js 添加如下配置来启用此功能：

{
    test: /\.js$/,
    use: [{
        loader: 'style-loader',
        options: {}
    }, {
        loader: 'css-loader',
        options: {
            importLoaders: 1
        }
    }, {
        loader: 'postcss-loader'
    }]
}

#### 3. React/JSX 属性名冲突
当在 JSX 中编写内联样式时需要注意属性名称应遵循驼峰命名法而不是连字符分隔形式。例如 width 和 height 应该写作 `width`, `height` 而不是 `font-size` 这样的写法；而像 border-radius 则应该对应成 `borderRadius` 形式。

#### 4. 使用 styled-components 或 emotion 等库替代传统方式
考虑到直接操作 DOM 元素上的 style 属性存在局限性，建议考虑采用更现代化的方式如 Styled Components 或 Emotion 来管理组件级别的样式声明。这些解决方案不仅提供了更好的可维护性和性能表现，同时也更容易与其他预处理器集成工作。