Astro 项目中的 PostCSS Autoprefixer 设置

Question

我想要达到的目标

在所有全局样式表和组件范围样式上的 Astro 项目的 npm run build 上设置自动 autoprefixer 以支持其他浏览器和旧浏览器（大约 2016 年）。

我的构建

• Astro v1.9.1
• 通过 SCSS 编译的 CSS
• 一些 Astro 集成（imagetools、prefetch、compress、NetlifyCMS 是我认为与此问题唯一相关的部分）

我采取的步骤

1. 构建了一个 Astro 项目，该项目使用 /src/styles 文件夹中的全局样式以及 Astro 组件中的范围样式
2. 跑npm install autoprefixer
3. 使用以下代码based on the docs创建了一个.postcss.config.cjs：

   module.exports = {
      plugins: [
        require('autoprefixer'),
      ],
    };
   

4. 跑npm run build

   我所期望的

   • 为了使用不同的供应商前缀编译我的 CSS 以支持浏览器
   • 我在src/styles/global.css 中添加text-size-adjust: 100%; 的主要测试是将-webkit-text-size-adjust: 100%; 添加到我在dist/assets（构建文件夹）中编译的CSS

   我还尝试了什么

   • 创建一个 .postcssrc.json 其中包含

   {
     "map": true,
     "plugins": {
       "autoprefixer": {}
     }
   }
   

   • 为我的astro.config.mjs 添加额外的 Vite 配置：

   import autoprefixer from "autoprefixer";
   
   export default defineConfig({
     vite: {
       postcss: {
         plugins: [
           autoprefixer({}), // add options if needed
         ],
       },
     },
   })
   

   • 将一些浏览器列表条件添加到我的package.json 以设置自动前缀的条件

   {
      "browserslist": [
          "last 2 versions",
          "not dead",
          "> 0.2%"
        ]
   }
   

   结果与结论

   • 然而我仍然没有在我的项目中发生自动前缀
   • 我也在努力在线或在 Astro Discord 服务器中寻找答案 - 这让我想知道：人们真的不再使用 autoprefixer 了吗？人们如何支持其他供应商和旧浏览器？

   非常感谢您的帮助，我很喜欢 Astro！

Answer 1

谷歌搜索我已经通过这篇文章，然后我在 Astro 的文档中找到了这个。

你见过这个吗？ https://docs.astro.build/en/guides/styling/#postcss