包裹上的css autoprefixer问题不显示前缀

时间:2018-08-30 09:58:35

标签: postcss autoprefixer parceljs

Autoprefixer在宗地1.9.7上不起作用:我有我的src文件夹,并且我在.postcssrc文件内的同一文件夹中有.postcssrc文件和样式文件:{ "plugins": { "autoprefixer": true } }

包裹已与npm install -g parcel-bundler一起安装 pacckage json dev依赖项:

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

也许有人知道这可能是什么问题吗?

2 个答案:

答案 0 :(得分:0)

有点晚,但可能对其他人有帮助。 唯一有效的方法就是放

"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": ""
}

答案 1 :(得分:0)

Post-css随附了自动前缀功能。

包裹捆包机随附了Post-css。

因此,您唯一需要的软件包是parcel-bundler中的package.json。 (此外,您只需要“ 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中向元素添加过渡后,在检查并查看开发工具中的样式后会显示前缀。