Как добавить правила оптимизации cssnano в vue-cli 3? - PullRequest
Новая
       84

Как добавить правила оптимизации cssnano в vue-cli 3?

0 голосов
/ 25 августа 2018

Я пытаюсь добавить правила оптимизации cssnano, но с vue-cli это, похоже, не работает.Я добавил следующий скрипт в vue.config.js: 

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("cssnano")({
            preset: [
              "default",
              {
                discardComments: {
                  removeAll: true
                },
                mergeRules: true
              }
            ]
          })
        ]
      }
    }
  }
};

Но он не будет работать (см. Скриншот ниже)

Снимок экрана - cssnano mergeRules не применяется:

enter image description here

Что я пропустил?

1 Ответ

0 голосов
/ 15 февраля 2019

Вы должны изменить api chainWebpack для редактирования параметров плагина cssnano.

Запустите эти команды: 

npx vue-cli-service inspect --mode=production --plugins

Это дает вам список плагинов, включенных в нашу конфигурацию webpack. Один из них называется 'optimize-css' 

npx vue-cli-service inspect --mode=production --plugin optimize-css

Теперь вы получите конфигурацию для этого плагина, включая конфигурацию cssnano. Вы также получаете информацию в комментариях о том, как перейти к нему через WebPack цепь. * * +1010

Имея эту информацию, мы теперь можем использовать API chainWebpack для редактирования параметры плагина: 

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('optimize-css').tap(([options]) => {
      options.cssnanoOptions.preset[1].svgo = false
      return [options]
    })
  }
}

Не проверено, поэтому никаких гарантий: wink:

Источник: https://forum.vuejs.org/t/vue-cli-3-remove-svgo-from-cssnano-optimizations/53560/2

...