因为我的项目里一开始只有：
module.exports = { plugins: [ { plugin: require”craco-cesium”)) }, ]};
所以我一直在plugins对象里尝试，怎么把一般react项目使用的webpack.config.js示例：
{ loader: require.resolve’postcss-loader’), options: { ident: ‘postcss’, plugins: ) => [ require’postcss-flexbugs-fixes’), autoprefixer{ browsers: [ ‘>1%’, ‘last 4 versions’, ‘Firefox ESR’, ‘not ie < 9’, // React doesn’t support IE8 anyway ], flexbox: ‘no-2009’, }),//px2rem加在这里 px2rem{ remUnit:75,exclude: /node_modules/i }) ], },},
加进去，结果试了各种格式都不行……
后来翻到一个示例：
const CracoLessPlugin = require’craco-less’)const path = require’path’)const pathResolve = pathUrl => path.join__dirname, pathUrl)module.exports = { webpack: { alias: { ‘@@’: pathResolve’.’), ‘@’: pathResolve’src’), ‘@assets’: pathResolve’src/assets’), ‘@common’: pathResolve’src/common’), ‘@components’: pathResolve’src/components’), ‘@hooks’: pathResolve’src/hooks’), ‘@pages’: pathResolve’src/pages’), ‘@store’: pathResolve’src/store’), ‘@utils’: pathResolve’src/utils’) // 此处是一个示例，实际可根据各自需求配置 } }, babel: { plugins: [ [‘import’, { libraryName: ‘antd’, style: true }], [‘@babel/plugin-proposal-decorators’, { legacy: true }] ] }, plugins: [ { plugin: CracoLessPlugin, options: { // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档 lessLoaderOptions: { lessOptions: { modifyVars: {}, javascriptEnabled: true } } } } ]}
觉得可能要写到webpack对象里……结果又试了半天……
最后幸亏去npm的craco里看了下介绍，知道了它完整的格式原来是：
const { when, whenDev, whenProd, whenTest, ESLINT_MODES, POSTCSS_MODES } = require”@craco/craco”); module.exports = { reactScriptsVersion: “react-scripts” /* default value) */, style: { modules: { localIdentName: “” }, css: { loaderOptions: { /* Any css-loader configuration options: https://github.com/webpack-contrib/css-loader. */ }, loaderOptions: cssLoaderOptions, { env, paths }) => { return cssLoaderOptions; } }, sass: { loaderOptions: { /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */ }, loaderOptions: sassLoaderOptions, { env, paths }) => { return sassLoaderOptions; } }, postcss: { mode: “extends” /* default value) */ || “file”, plugins: [], env: { autoprefixer: { /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */ }, stage: 3, /* Any valid stages: https://cssdb.org/#staging-process. */ features: { /* Any CSS features: https://preset-env.cssdb.org/features. */ } }, loaderOptions: { /* Any postcss-loader configuration options: https://github.com/postcss/postcss-loader. */ }, loaderOptions: postcssLoaderOptions, { env, paths }) => { return postcssLoaderOptions; } } }, eslint: { enable: true /* default value) */, mode: “extends” /* default value) */ || “file”, configure: { /* Any eslint configuration options: https://eslint.org/docs/user-guide/configuring */ }, configure: eslintConfig, { env, paths }) => { return eslintConfig; }, loaderOptions: { /* Any eslint-loader configuration options: https://github.com/webpack-contrib/eslint-loader. */ }, loaderOptions: eslintOptions, { env, paths }) => { return eslintOptions; } }, babel: { presets: [], plugins: [], loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ }, loaderOptions: babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; } }, typescript: { enableTypeChecking: true /* default value) */ }, webpack: { alias: {}, plugins: [], configure: { /* Any webpack configuration options: https://webpack.js.org/configuration */ }, configure: webpackConfig, { env, paths }) => { return webpackConfig; } }, jest: { babel: { addPresets: true, /* default value) */ addPlugins: true /* default value) */ }, configure: { /* Any Jest configuration options: https://jestjs.io/docs/en/configuration. */ }, configure: jestConfig, { env, paths, resolve, rootDir }) => { return jestConfig; } }, devServer: { /* Any devServer configuration options: https://webpack.js.org/configuration/dev-server/#devserver. */ }, devServer: devServerConfig, { env, paths, proxy, allowedHost }) => { return devServerConfig; }, plugins: [ { plugin: { overrideCracoConfig: { cracoConfig, pluginOptions, context: { env, paths } }) => { return cracoConfig; }, overrideWebpackConfig: { webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { return webpackConfig; }, overrideDevServerConfig: { devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => { return devServerConfig; }, overrideJestConfig: { jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => { return jestConfig }, }, options: {} } ]};
问题一下子就明朗了，肯定是要写到postcss对象里，所以最终craco与px2rem结合的写法为：
const px2rem = require’postcss-px2rem-exclude’);module.exports = { style: { postcss: { loaderOptions: { ident: ‘postcss’, plugins: ) => [ // 16px转1rem px2rem{ remUnit: 16 }) ], }, } }, plugins: [ { plugin: require”craco-cesium”)) }, ]};
这样之后，@media 需要加 /*no*/ 防止这里的px也变成rem。
剩下的就是js里给dom直接加的px，这个我估计没有组件能解决，只能自己一个一个去改了……