search

arackaf / customize-cra

Override webpack configurations for create-react-app 2.0
MIT License
2.78k stars 268 forks source link

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

Open changguilei opened 1 year ago

changguilei commented 1 year ago

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

changguilei commented 1 year ago

有么有大佬 帮解决下

LJJCherry commented 1 year ago

参考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 commented 1 year ago

参考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 commented 1 year ago

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 commented 1 year ago 
// 重写 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 commented 1 year ago 
// 重写 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 commented 1 year ago 
// 重写 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;
};