PostCSS自动修复器在Astro项目中的设置

Question

我想达到的目标

在Astro项目的所有全局样式表和组件作用域样式的npm run build上设置自动自修复器，以支持其他浏览器和较旧的浏览器(大约2016年)。

构建

• Astro v1.9.1
通过SCSS编译的CSS
• 一些Astro集成(imagetools, prefetch, compress, NetlifyCMS是唯一我认为可能有任何相关的问题)

我走过的步骤

1. 构建一个Astro项目，在/src/styles文件夹中使用全局样式，在Astro组件中使用范围样式
2. Rannpm install autoprefixer
3. 根据文档用以下代码创建了一个.postcss.config.cjs:

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

4. Rannpm 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服务器上找到答案-这让我想知道:人们是不是真的不再使用自动修复了?人们是如何支持其他厂商和旧浏览器的?

Answer 1

试试这个模板https://github.com/lightrix/astro-starter-template它有自动修复器，cssnano，压缩和所有你需要的东西。