Как использовать продувку CSS с vueJs cli проектом - PullRequest
Новая
       16

Как использовать продувку CSS с vueJs cli проектом

0 голосов
/ 09 апреля 2020

Я работаю над Vue сборкой проекта с Vue CLI 3. Конечно, для меня важны оптимизации, поэтому я хотел бы использовать purge css, чтобы удалить неиспользуемые CSS при сборке в производство.

Я следовал тому, что написано на этой странице https://purgecss.com/guides/vue.html#use -the- vue -cli-plugin . Но после этого всякий раз, когда я пытаюсь построить свой проект, используя npm run build, я получаю эту ошибку, и процесс сборки прерывается. enter image description here

Вот мой postcss.config.js файл. Примечание: этот файл создается автоматически при следовании приведенному выше руководству. 

const IN_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    IN_PRODUCTION && require("@fullhuman/postcss-purgecss");
    ({
      content: [`./public/**/*.html`, `./src/**/*.vue`],
      defaultExtractor(content) {
        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
      },
      whitelist: [],
      whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/],
    })
  ],
};

ПРИМЕЧАНИЕ : Я думаю, что во время процесса сборки он не может найти плагин @fullhuman/postcss-purgecss из-за по умолчанию в Vue cli проектах @ используется псевдоним для папки src, поэтому он выглядит в папке src, а не node_modules. Но я не уверен, что это реальная проблема

...