因为我的项目里一开始只有:
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,这个我估计没有组件能解决,只能自己一个一个去改了……