react项目：在configoveride.js中addPostcssPlugins添加postcss-pxtorem无效

[changguilei]

addPostcssPlugins([ require("postcss-pxtorem")({ rootValue: 16, propList: [""], replace:true // propList: ['', '!border*', '!font-size*', '!letter-spacing'], // propWhiteList: [] }), ]),

[changguilei]

有么有大佬 帮解决下

[LJJCherry]

参考MR：https://github.com/arackaf/customize-cra/pull/339/commits/0f88a26f8dfd1ceaa0214751f78eb7261fdfd0cc 需要重写一下这个方法 addPostcssPlugins

const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === "postcss") {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = () => [...plugins];
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = () => [...originalPlugins(), ...plugins];
          }
        }
      }));
  return config;
};
``` `

[521guyu]

参考MR：0f88a26 需要重写一下这个方法 addPostcssPlugins

const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === "postcss") {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = () => [...plugins];
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = () => [...originalPlugins(), ...plugins];
          }
        }
      }));
  return config;
};
``` `

你好？我用您这个方法似乎，还是不起作用

const {
  override,
  addLessLoader,
  // addPostcssPlugins,
  fixBabelImports,
} = require("customize-cra");
const addPostcssPlugins = plugins => (config) => {
  console.log(config,"000")
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === "postcss") {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = () => [...plugins];
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = () => [...originalPlugins(), ...plugins];
          }
        }
      }));
  return config;
};

const px2rem = require('postcss-plugin-px2rem');
module.exports = override(
  // addPostcssPlugins([require("autoprefixer")]), //自动给样式加浏览器前缀 不过 cra自带了所以可以不用这个
  addLessLoader({
    lessOptions:{
      javascriptEnabled: true,
      // modifyVars: { '@primary-color': '#1DA57A' }, // 你的主题色
    },

  }),

  // 针对antd-mobile 实现按需打包：根据import来打包 (使用babel-plugin-import)
  // fixBabelImports("import", {
  //   libraryName: "antd",
  //   libraryDirectory: "es",
  //   style: true, //自动打包相关的样式 默认为 style:'css'
  // }),
   addPostcssPlugins([require("postcss-px2rem-exclude")({ remUnit: 50,exclude:/node_modules/i })])

);

[521guyu]

addPostcssPlugins([ addPostcssPlugins（[ require("postcss-pxtorem")({ require（“pxtorem”）（{ rootValue: 16, propList: [""], replace:true // propList: ['', '!border*', '!font-size*', '!letter-spacing'],propList：[""]，replace：true // propList：[''，'！border *'，'！font-size *'，'！字母间距’]， // propWhiteList: [] // propWhiteList：[] }), ]), 您好？您解决了吗？ 我引入 postcss-px2rem也不起作用！如果不行的话，我就只能 用 npm run eject的方式写了。我是h5移动端项目！

[LJJCherry]

// 重写 addPostcssPlugins 方法
const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = plugins;
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = [...originalPlugins, ...plugins];
          }
        }
      }));
  return config;
};

用法：
   addPostcssPlugins([['postcss-pxtorem', {
      rootValue: 100,
      propList: ['*'],
    }]])

[521guyu]

// 重写 addPostcssPlugins 方法
const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = plugins;
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = [...originalPlugins, ...plugins];
          }
        }
      }));
  return config;
};

用法：
   addPostcssPlugins([['postcss-pxtorem', {
      rootValue: 100,
      propList: ['*'],
    }]])

这是我完整的配置：

const {
 override,
 addLessLoader,
 // addPostcssPlugins,
 fixBabelImports,
 addWebpackAlias,
} = require("customize-cra-5");
const path = require("path");
// 重写 addPostcssPlugins 方法
const addPostcssPlugins = plugins => (config) => {
 const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
 rules.forEach(r => r.use
     && r.use.forEach((u) => {
       if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
         if (!u.options.postcssOptions.plugins) {
           u.options.postcssOptions.plugins = plugins;
         }
         if (u.options.postcssOptions.plugins) {
           const originalPlugins = u.options.postcssOptions.plugins;
           console.log("originalPlugins配置：",originalPlugins)
           u.options.postcssOptions.plugins = [...originalPlugins, ...plugins];
         }
       }
     }));
 return config;
};
module.exports = override(
 addLessLoader({
   lessOptions: {
     javascriptEnabled: true,
     // modifyVars: { '@primary-color': '#1DA57A' }, // 你的主题色
   },
 }),
 // addPostcssPlugins([[
 //   require("postcss-px2rem-exclude")({
 //     remUnit: 50,
 //     exclude: /node_modules/i,
 //   }),
 // ]]),
 addPostcssPlugins([['postcss-pxtorem', {
   rootValue: 4,
   propList: ['*'],
 }]]),
 addWebpackAlias({
   "@": path.resolve("src"),
 })
);

运行后报错：originalPlugins is not iterable 打印出的 originalPlugins配置 为： originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [Function: plugins]

似乎打印了两次 第一次是 数组形式，第二次是个 函数形式

[521guyu]

// 重写 addPostcssPlugins 方法
const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = plugins;
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = [...originalPlugins, ...plugins];
          }
        }
      }));
  return config;
};

用法：
   addPostcssPlugins([['postcss-pxtorem', {
      rootValue: 100,
      propList: ['*'],
    }]])

这是我完整的配置：

const {
 override,
 addLessLoader,
 // addPostcssPlugins,
 fixBabelImports,
 addWebpackAlias,
} = require("customize-cra-5");
const path = require("path");
// 重写 addPostcssPlugins 方法
const addPostcssPlugins = plugins => (config) => {
 const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
 rules.forEach(r => r.use
     && r.use.forEach((u) => {
       if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
         if (!u.options.postcssOptions.plugins) {
           u.options.postcssOptions.plugins = plugins;
         }
         if (u.options.postcssOptions.plugins) {
           const originalPlugins = u.options.postcssOptions.plugins;
           console.log("originalPlugins配置：",originalPlugins)
           u.options.postcssOptions.plugins = [...originalPlugins, ...plugins];
         }
       }
     }));
 return config;
};
module.exports = override(
 addLessLoader({
   lessOptions: {
     javascriptEnabled: true,
     // modifyVars: { '@primary-color': '#1DA57A' }, // 你的主题色
   },
 }),
 // addPostcssPlugins([[
 //   require("postcss-px2rem-exclude")({
 //     remUnit: 50,
 //     exclude: /node_modules/i,
 //   }),
 // ]]),
 addPostcssPlugins([['postcss-pxtorem', {
   rootValue: 4,
   propList: ['*'],
 }]]),
 addWebpackAlias({
   "@": path.resolve("src"),
 })
);

运行后报错：originalPlugins is not iterable 打印出的 originalPlugins配置 为： originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: [Object], stage: 3 } ], 'postcss-normalize' ] originalPlugins配置： [Function: plugins]

似乎打印了两次 第一次是 数组形式，第二次是个 函数形式

不过我做了修改 改成了 下面这个就生效了 // 重写 addPostcssPlugins 方法

const addPostcssPlugins = plugins => (config) => {
  const rules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  rules.forEach(r => r.use
      && r.use.forEach((u) => {
        if (u.options && u.options.postcssOptions && u.options.postcssOptions.ident === 'postcss') {
          if (!u.options.postcssOptions.plugins) {
            u.options.postcssOptions.plugins = plugins;
          }
          if (u.options.postcssOptions.plugins) {
            const originalPlugins = u.options.postcssOptions.plugins;
            u.options.postcssOptions.plugins = [originalPlugins, ...plugins];
          }
        }
      }));
  return config;
};