react 如何使用postcss

首先执行这个命令行

npm run eject 变成自定义配置的模式

配置postcss-pxtorem

1、安装插件：npm install postcss-pxtorem --save-dev
2、打开文件：webpack.config.dev.js
3、修改配置，见以下代码
4、index.html页面配置

注: postcss的版本号,因为出现过版本不对报错的情况大家要小心
*注: eject成为自定义配置以后，这段代码摘自 webpack.config.dev.js 文件，标注部分是本次配置 pxtorem 所做的更改。

    // common function to get style loaders
    const getStyleLoaders = (cssOptions, preProcessor) => {
        const loaders = [
            isEnvDevelopment && require.resolve('style-loader'),
            isEnvProduction && {
                loader: MiniCssExtractPlugin.loader,
                // css is located in `static/css`, use '../../' to locate index.html folder
                // in production `paths.publicUrlOrPath` can be a relative path
                options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {},
            },
            {
                loader: require.resolve('css-loader'),
                options: cssOptions,
            },
            {
                // Options for PostCSS as we reference these options twice
                // Adds vendor prefixing based on your specified browser support in
                // package.json
                loader: require.resolve('postcss-loader'),
                options: {
                    postcssOptions: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebook/create-react-app/issues/2677
                        ident: 'postcss',
                        config: false,
                        plugins: !useTailwind ? [
                            'postcss-flexbugs-fixes', [
                                'postcss-preset-env',
                                {
                                    autoprefixer: {
                                        flexbox: 'no-2009',
                                    },
                                    stage: 3,
                                },
                            ],
                            // Adds PostCSS Normalize as the reset css with default options,
                            // so that it honors browserslist config in package.json
                            // which in turn let's users customize the target behavior as per their needs.
                            'postcss-normalize',
                        ] : [
                            'tailwindcss',
                            'postcss-flexbugs-fixes', [
                                'postcss-preset-env',
                                {
                                    autoprefixer: {
                                        flexbox: 'no-2009',
                                    },
                                    stage: 3,
                                },
                            ],
                            /*****************************************/                        
                            require('postcss-pxtorem')({
                                rootValue: 100,
                                selectorBlackList: [], //过滤
                                propList: ['*'],
                            })
                            /*****************************************/
                        ],
                    },
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                },
            },
        ].filter(Boolean);
        if (preProcessor) {
            loaders.push({
                loader: require.resolve('resolve-url-loader'),
                options: {
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                    root: paths.appSrc,
                },
            }, {
                loader: require.resolve(preProcessor),
                options: {
                    sourceMap: true,
                },
            });
        }
        return loaders;
    };

index.html页面配置，加在head标签里，这段是个人一直在用的rem计算代码,mark一下，代码以 750px的设计稿为基准，可根据自身情况变更

<title>React App</title>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>