重复css var.第一次使用正确的值，第二次使用类似var(--variable)的值.为什么?(React，webp

Question

我有下一个css，它包含在js文件中：

:root {
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}
.annotationLayer .textWidgetAnnotation textarea {
background-image: var(--annotation-unfocused-field-background);
}

从webpack生成后，我得到了下一个css捆绑包，它重复：

.annotationLayer .textWidgetAnnotation textarea {
background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
background-image: var(--annotation-unfocused-field-background);

我的webpack.common.js:

module: {
rules: [
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: /.css$/,
exclude: cssModuleRegex,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
}
],
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},

为什么重复？

Answer 1

这里是词根：

{
// 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: 3,
}),
// 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(),
PrefixWrap(".test", {
ignoredSelectors: [":root"],
})
],
sourceMap: true,
},
},

postpass预设环境重复此操作。我通过了4号进入阶段，polyfill的水平变得稳定。

Answer 2

这是因为postcss-preset-env。默认情况下，此配置会为CSS自定义属性添加已编译的值background-color: #fff; background-color: var(--bf-color);，而不仅仅是background-color: var(--bg-color);

我已经将stage: 4添加到.postcss.config.js文件中，以避免额外的行。

module.exports = {
plugins: {
'postcss-preset-env': {
browsers: 'last 2 versions',
stage: 4
},
},
}