PurgeCSS

Vue

Vue CLIプラグインの使用

vue cli plugin purgecss

インストール

vue-cli 3をまだインストールしていない場合は、まず次のURLのインストール手順に従ってください: https://github.com/vuejs/vue-cli

vue-cli 3.0を使用してプロジェクトを生成

vue create my-app

PurgeCSSプラグインをインストールする前に、変更内容をコミットまたはスタッシュして、必要に応じて変更を元に戻せるようにしておきます。

PurgeCSSプラグインをインストールするには、アプリケーションフォルダーに移動し、PurgeCSSを追加するだけです。

cd my-app

vue add @fullhuman/purgecss

PurgeCSSプラグインは、PurgeCSSが設定されたpostcss.config.jsファイルを作成します。その後、PurgeCSSオプションを変更できます。

使用

以下はこのプラグインによって設定された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) || []
  },
  safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}