{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 4,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},

这样，项目就可以成功构建了~

阶段4或5都很好！

@iansu@mrmckeb@ianschmitz@petetnt 你觉得有必要更新吗？

我认为最好的方法是将postcss-custom-properties升级到9.1.1~版本。

但是有时候也需要以下的写作方法，

:root {
 --distance: 20px + 20px;
}

或者

calc(var(--distance)*-1/2)

此外，底层解析器 postcss-values-parser 也支持这种方法~你可以查看这个问题 postcss/postcss-custom-properties#161