复制css var。第一次具有正确的值，第二次就像 var(--variable) 一样。为什么？（反应，webpack，css）答案

【问题标题】：Duplicating css var. First time with correct value and second time just like var(--variable). Why? (React, webpack, css)复制css var。第一次具有正确的值，第二次就像 var(--variable) 一样。为什么？（反应，webpack，css）
【发布时间】：2021-12-29 17:42:52
【问题描述】：

我有下一个 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,
        },

为什么会重复？

【问题讨论】：

我不确定这样做的确切设置是什么，但我知道这是处理浏览器兼容性的 webpacks 方式。如果浏览器不支持 css 变量，那么它有备用 css。

标签： css reactjs webpack mini-css-extract-plugin

【解决方案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,
        },
      },

postcss-preset-env 做这个重复。我将数字 4 传递到阶段，polyfill 的级别变得稳定。

【讨论】：