Как настроить Autoprefixer в Angular 7 - PullRequest
Новая
       27

Как настроить Autoprefixer в Angular 7

0 голосов
/ 10 января 2019

Я использую авторефикс в Angular 7 Project. Но когда я открываю браузер devtools и фокусирую элемент с классом "simple-content", который отображает flex в качестве примененного стиля, ожидаемых «префиксов» не возникает. В проектах Angular 4-6 это работает нормально.

Шаг 1: Запустите ng serve Шаг 2: Откройте браузер devtools и сфокусируйте элемент с классом "simple-content", который имеет display: flex.

В package.json у меня есть 

 {
    "browserslist": [
    "last 1 version",
    "> 1%"
    ]
  }. 

In package-lock.json I have 

    "autoprefixer": {
      "version": "9.4.4",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.4.tgz",
      "integrity": "sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==",
      "requires": {
        "browserslist": "^4.3.7",
        "caniuse-lite": "^1.0.30000926",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.7",
        "postcss-value-parser": "^3.3.1"
      },

Я попытался включить автофиксирование для flexbox с помощью / * autoprefixer: on * /, но безрезультатно.

В файле CSS у меня есть 

.simple-content {
    display: flex;
}

Ожидаемый результат: 

.simple-content {
  display: -webkit-box;    
  display: -moz-box;      
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;             
}

1 Ответ

0 голосов
/ 17 марта 2019

Я попробовал онлайн-инструмент автоматического префикса (https://autoprefixer.github.io/), чтобы проверить список браузеров, который вы использовали в package.json, и заметил, что он не генерирует префикс css: did not yield prefixed css

При изменении значения списка браузеров на последние 2 версии он генерировал css с префиксом: did generate prefixed css

Так что ваш package.json выглядит нормально, и вы можете попробовать его, просто обновив список браузеров.

Также, к вашему сведению, добавлена ​​угловая версия V7.3.5 src / browserslist , что означает, что вам не нужно добавлять .browserslistrc или свойство browserslist в package.json для угловых 7 проектов. Все, что вам нужно сделать, это удалить , а не в последней строке для поддержки IE 9-11 .

...