PostCSS 与 CSSNano 的 CSS 资产优化

1. 删除 browserslistrc 文件中的“not dead”

在开始之前，确保删除 browserslistrc 文件中的“not dead”条目。这个操作确保了 PostCSS 无需额外处理不必要的文件。直接打开文件ῶ，查找并删除相关条目。若非扩展选项，建议谨慎操作以免丢失自定义配置。

2. 安装所需的 PostCSS 插件
    
     
      
      
npm install postcss-import postcss-url postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
    
     
    
确保使用 npm 或Yarn命令安装所有必要的依赖。这些插件将帮助您高效处理 CSS 资产，支持现代 CSS特性和优化任务。
  
3. 配置 package.json 文件
    
     
      
      
在你的项目中添加如下配置：
      
              "scripts": {
            "build": "postcss src/app.css -o build/.css --env NODE_ENV=production",
            "watch": "postcss src/app.css -o build/.css --env NODE_ENV=production --watch"
          }          
     
    
在 "scripts" 部分添加启动命令，确保 PostCSS 插件能够顺利工作。这一步骤将使您的开发过程更加高效。
  
4. 启动项目并测试
    
运行 npm run watch 或 yarn watch 命令，了解 PostCSS 如何处理您的 CSS 文件。通过浏览器查看输出文件，确保所有样式正确应用。必要时调整配置以达到最佳效果。