在未显示前缀的包裹上发布 css autoprefixer 问题

Posted 2023-02-23

【中文标题】在未显示前缀的包裹上发布 css autoprefixer 问题

【英文标题】：post css autoprefixer issue on parcel not showing prefixes

【发布时间】：2019-02-05 05:35:04

【问题描述】：

Autoprefixer 不适用于 parcel 1.9.7：我有我的 src 文件夹，我在 .postcs-s-rc 文件内的同一文件夹内容中有 .postcs-s-rc 文件和样式文件： "plugins": "autoprefixer": true

包裹是用npm install -g parcel-bundler安装的 打包 json 开发依赖：

"devDependencies": 
 "autoprefixer": "^9.1.3",
 "node-sass": "^4.9.3",
 "postcss-modules": "^1.3.2"
,

也许有人知道可能是什么问题？

【问题讨论】：

也许你没有创建 .browserslistrc 文件。查看docs

这个问题解决了吗？我也有同样的问题

【参考方案1】：

Post-css 带有开箱即用的自动前缀。

Parcel bundler 带有开箱即用的 Post-css。

所以你唯一需要的包是你的package.json 中的parcel-bundler。 （另外你只需要“sass”包而不是“node-sass”。额外的包可能是导致问题的原因。

要正确配置它，请尝试这个示例 postcss 设置，其中最重要的是 autoprefixer 对象和 overrideBrowserslist 数组不为空：

  ...

  "devDependencies": 
    "parcel-bundler": "^1.12.4",
    "sass": "^1.25.0"
  ,
  "postcss": 
    "plugins": 
      "autoprefixer": 
        "overrideBrowserslist": [
          ">1%",
          "last 4 versions",
          "Firefox ESR",
          "ie >= 9"
        ]
      
    
  

在 CSS 中向元素添加过渡后，前缀会在开发工具中检查和查看样式后显示。

【参考方案2】：

有点晚了，但可能对其他人有所帮助。 唯一有用的就是放

"postcss": 
    "plugins": 
      "autoprefixer": 
    

直接在 package.json 中

所以，package.json 看起来像这样：

  "name": "parcel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": 
    "dev": "parcel src/index.html",
    "prod": "parcel build src/index.html"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": 
    "abstracts": "^0.2.3",
    "postcss-modules": "^1.4.1"
  ,
  "devDependencies": 
    "autoprefixer": "^9.7.1",
    "sass": "^1.23.3"
  ,
  "postcss": 
    "plugins": 
      "autoprefixer": 
    
  ,
  "description": ""

【讨论】：

大规模升级！我想知道为什么仍然如此，以及为什么在撰写本文时包裹文档与 postcss 的现实如此不同步？