Как эффективно объединить post css -preset-env и doiuse в Nuxt JS и / или Webpack? - PullRequest
Новая
       33

Как эффективно объединить post css -preset-env и doiuse в Nuxt JS и / или Webpack?

0 голосов
/ 13 февраля 2020

Я добавил postcss-preset-env и doiuse в свой проект Nuxt JS, чтобы лучше поддерживать старые браузеры и получить представление о том, что CSS может вызвать проблемы. Я не уверен, насколько эффективны мои текущие настройки. doiuse -линтинг игнорирует проблемы, охватываемые postcss-preset-env? Как я могу минимизировать избыточные CSS, полифилы и двойные хиты?

Чтобы сделать ответы полезными для большой группы людей, было бы полезно, если бы вы показали примеры наилучшей конфигурации для обоих Nuxt JS 2. x и Webpack.

Конфигурация

Вот моя текущая конфигурация в nuxt.config.js: 

import * as pkg from "./package";    

export default {

//...

// Build configuration
build: {
  postcss: {
    // Add plugin names as key and arguments as value
    // Install them before as dependencies with npm or yarn
    plugins: {
      "postcss-normalize": {
        browsers: pkg.browserslist,
      },
      "postcss-preset-env": {
        browsers: pkg.browserslist,
      },
      doiuse: {
        browsers: pkg.browserslist,
        ignore: [],
      },
    },
    preset: {
      // Change the postcss-preset-env settings
      autoprefixer: {
        grid: true,
      },
    },
  },

//...

Определения

post css -preset-env используется для преобразования "современного" CSS в устаревшее CSS, которое большинство браузеров может понять, похожее на то, что Babel делает для JavaScript.

Пакет doiuse связывает ваш CSS, чтобы проверить, могут ли целевые браузеры в вашем browserslist работать с написанным вами CSS. Такие значения, как «flex» и «initial», будут выдавать предупреждения для Inte rnet Explorer.

...