今天使用了一下antd-mobile發現我之前配置的postcss失效了，防止下次踩坑記錄一下解決方案
解決方案：在config-overrides.js檔案里重寫postcss，加入如下代碼
npm下載以下模塊
npm i react-app-rewire-postcss postcss-px2rem-exclude -S
const {
override,
fixBabelImports,
addWebpackAlias,
addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
module.exports = override(
// 配置按需加載
fixBabelImports("import", {
libraryName: "antd-mobile",
style: "css",
}),
// 組態檔別名
addWebpackAlias({
"@": path.resolve(__dirname, "src"),
"@scss": path.resolve(__dirname, "src/assets/scss"),
"@images": path.resolve(__dirname, "src/assets/images"),
"@views": path.resolve(__dirname, "src/views"),
"@network": path.resolve(__dirname, "src/network"),
"@store": path.resolve(__dirname, "src/store"),
"@components": path.resolve(__dirname, "src/components"),
}),
addDecoratorsLegacy(),
(config, env) => {
// 重寫postcss
rewirePostcss(config, {
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
require("postcss-px2rem-exclude")({
// 設計稿寬度/10
remUnit: 1080 / 10,
exclude: /node-modules/i,
}),
],
});
return config;
}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282087.html
標籤：其他
上一篇：大廠offer拿到手軟，學習flag立起來！五一快樂特別篇！
下一篇：首發! 統信UOS 家庭版內測