为什么 Gatsby 删除 duplicate/fallback css 属性

Question

为什么 Gatsby 删除 duplicate/fallback css 属性？以及如何在使用全局样式表时防止这种行为。

我正在使用 gatsbyjs 构建一个静态站点。我已经编写了一个全局样式表 (layout.css)，并将其附加到布局组件。

在那个全局样式表中我有这个样式：

.wrapper.style3 {
    background-color: red;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    color: #fff;
}

然后每当我使用 gatsby develop 或提供由 gatsby build 构建的文件时生成的样式生成 ignores/deletes background-image 属性.

的所有后备值

生成的样式是

.wrapper.style3 {
    background-color: red;
    background-image: linear-gradient(top,transparent,rgba(0,0,0,.15)),url("../images/bg01.png");
    color: #fff
}

如果我删除最后一个 background-image 属性，那么新的最后一个 background-image 属性将用于生成的 css。这让我相信 gatsby 正在删除 css 属性。

为什么要这样做以及如何防止后备属性值从生成的样式表中删除？我想要跨浏览器兼容性的回退值。

我没有使用任何插件。

Gatsby CLI version: 4.13.0
Gatsby version: 4.13.0
Nodejs:  v16.15.0

Answer 1

这是一个 webpack-related 问题，而不是 Gatsby 本身。我认为你可以解决这个 by using PostCSS 以创建语法和功能并将其扩展到现代 browser-friendly CSS 所以你只需要添加你的规则和 PostCSS 将处理 cross-browser 和后备兼容性（如果有的话，您可以像现在一样添加自己的兼容性）。

通过以下方式安装：

npm install postcss gatsby-plugin-postcss

要将它与 CSS 模块一起使用，您需要在 gatsby-config.js 中添加以下内容：

plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
    },
  },
],

如果你想包含 autoprefixer 可以通过添加额外的 PostCSS 插件来完成：

plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [
        require(`postcss-preset-env`)({ stage: 0 }),
        require('autoprefixer'),
      ],
    },
  },
];

修改自：Gatsby plugin settings for gatsby-plugin-postcss + autoprefixer + browserslist

为什么 Gatsby 删除 duplicate/fallback css 属性

Why is Gatsby removing duplicate/fallback css properties

css

reactjs

gatsby